Create new chart with x.type=time (#288)

* Create new chart with x.type=time

* Remove packageManager item

* Nevermind, dont pass through callbacks

* Update packages

package.json

@@ -41,28 +41,30 @@
   },
   "devDependencies": {
     "@babel/cli": "7.26.4",
-    "@babel/core": "7.26.0",
-    "@babel/plugin-transform-modules-commonjs": "7.25.9",
-    "@babel/preset-env": "7.26.0",
-    "@rollup/plugin-typescript": "12.1.1",
+    "@babel/core": "7.26.7",
+    "@babel/plugin-transform-modules-commonjs": "7.26.3",
+    "@babel/preset-env": "7.26.7",
+    "@rollup/plugin-typescript": "12.1.2",
     "@sgratzl/chartjs-chart-boxplot": "4.4.4",
     "@types/jest": "29.5.14",
-    "canvas": "2.11.2",
+    "canvas": "3.1.0",
+    "chartjs-adapter-luxon": "1.3.1",
     "chartjs-chart-wordcloud": "4.4.4",
     "chartjs-plugin-a11y-legend": "0.2.0",
     "cross-env": "7.0.3",
     "depcheck": "1.4.7",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "rollup": "4.25.0",
+    "luxon": "3.5.0",
+    "rollup": "4.32.1",
     "rollup-plugin-copy": "3.5.0",
     "ts-jest": "29.2.5",
     "tslib": "2.8.1",
-    "typescript": "5.6.3",
-    "vite": "6.0.3"
+    "typescript": "5.7.3",
+    "vite": "6.0.11"
   },
   "dependencies": {
-    "chart.js": "4.4.6",
+    "chart.js": "4.4.7",
     "chart2music": "1.18.0"
   }
 }

samples/charts/index.ts

@@ -23,10 +23,11 @@ import wordcloud2 from "./wordcloud2";
 import scatter from "./scatter";
 import grouped_scatter from "./grouped_scatter";
 import empty from "./empty";
+import memoryChart from "./memoryChart";
 
 export default {
     simple_bar,
-    spanish_bar, 
+    spanish_bar,
     log,
     grouped_bar, 
     grouped_line,
@@ -37,6 +38,7 @@ export default {
     getting_started_Example,
     string_x_minimum,
     string_x_values,
+    memoryChart,
     box_plot,
     box_plot_numbers,
     box_plot_group,

samples/charts/memoryChart.ts

@@ -0,0 +1,132 @@
+import type {ChartTypeRegistry} from "chart.js";
+
+const formatter = new Intl.DateTimeFormat(undefined, {
+    localeMatcher: "lookup",
+    hour: "numeric",
+    minute: "2-digit"
+});
+const sampleData = {
+    theme: "light",
+    chartData: {
+        total: 31.46,
+        series: [
+            {
+                name: "Total",
+                data: [
+                    { x: "1/28/2025, 2:01:13 PM", y: 0.73 },
+                    { x: "1/28/2025, 2:04:13 PM", y: 0.73 },
+                    { x: "1/28/2025, 2:05:13 PM", y: 0.73 },
+                ]
+            },
+            {
+                name: "Main Proc",
+                data: [
+                    { x: "1/28/2025, 2:01:13 PM", y: 0.19 },
+                    { x: "1/28/2025, 2:04:13 PM", y: 0.19 },
+                    { x: "1/28/2025, 2:05:13 PM", y: 0.19 }
+                ]
+            },
+            {
+                name: "Type A",
+                data: [
+                    { x: "1/28/2025, 2:01:13 PM", y: 0.48 },
+                    { x: "1/28/2025, 2:04:13 PM", y: 0.48 },
+                    { x: "1/28/2025, 2:05:13 PM", y: 0.48 },
+                ]
+            },
+            {
+                name: "Type B",
+                data: [
+                    { x: "1/28/2025, 2:01:13 PM", y: 0.03 },
+                    { x: "1/28/2025, 2:04:13 PM", y: 0.03 },
+                    { x: "1/28/2025, 2:05:13 PM", y: 0.03 },
+                ]
+            },
+            {
+                name: "Type C",
+                data: [
+                    { x: "1/28/2025, 2:01:13 PM", y: 0.43 },
+                    { x: "1/28/2025, 2:04:13 PM", y: 0.44 },
+                    { x: "1/28/2025, 2:05:13 PM", y: 0.45 },
+                ]
+            }
+        ]
+    }
+};
+const convertChartDataSeriesToChartjsDatasets = (chartDataSeries) => {
+    return chartDataSeries.map(({name, data}) => {
+        return {
+            label: name,
+            data: data.map(({x, y}) => {
+                return {
+                    x: new Date(x).valueOf(),
+                    y
+                }
+            })
+        }
+    })
+}
+
+const config = {
+    type: "line" as keyof ChartTypeRegistry,
+    data: {
+        datasets: convertChartDataSeriesToChartjsDatasets(sampleData.chartData.series)
+    },
+    options: {
+        plugins: {
+            title: {
+                display: false
+            },
+            tooltip: {
+                callbacks: {
+                    label: (context) => {
+                        return `${context.dataset.label}: ${context.parsed.y * 100}%`
+                    }
+                }
+            },
+            chartjs2music: {
+                axes: {
+                    x: {
+                        format: (n: number) => formatter.format(n)
+                    },
+                    y: {
+                        format: (y: number) => `${y*100}%`
+                    }
+                }
+            }
+        },
+        responsive: true,
+        scales: {
+            x: {
+                title: {
+                    text: "Time",
+                    display: false
+                },
+                type: "time",
+                time: {
+                    unit: "minute"
+                },
+                ticks: {
+                    callback: (n) => {
+                        return formatter.format(n);
+                    }
+                }
+            },
+            y: {
+                title:{ 
+                    text: "% of Memory Used",
+                    display: false
+                },
+                min: 0,
+                max: 1,
+                ticks: {
+                    callback: (n) => {
+                        return `${n*100}%`
+                    }
+                }
+            }
+        }
+    }
+};
+
+export default config;

samples/makeChart.ts

@@ -4,6 +4,7 @@ import samples from "./charts";
 import {BoxPlotController, BoxAndWiskers} from "@sgratzl/chartjs-chart-boxplot";
 import { WordCloudController, WordElement } from 'chartjs-chart-wordcloud';
 import legendPlugin from "chartjs-plugin-a11y-legend";
+import 'chartjs-adapter-luxon';
 
 const charts = Object.values(samples);
 

src/c2m-plugin.ts

@@ -72,10 +72,6 @@ const generateAxisInfo = (chartAxisInfo: any, chart: any) => {
         axis.type = "log10";
     }
 
-    if(chartAxisInfo.ticks.callback){
-        axis.format = chartAxisInfo.ticks.callback;
-    }
-
     return axis;
 }