@operato/chart 7.0.1 → 7.0.2

package/dist/src/scichart/scichart-builder.js

@@ -1,21 +1,32 @@
-export async function buildSciChart(config, container, { fontSize, fontFamily, fontColor = 'red' }) {
+import { TinyColor } from '@ctrl/tinycolor';
+function getBaseColorFromTheme(theme) {
+    return new TinyColor(theme == 'dark' ? '#fff' : '#000');
+}
+function getThemeFromBrowser() {
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+export async function buildSciChart(config, container, { fontSize, fontFamily, fontColor }) {
     if (!config) {
         return;
     }
-    const { SciChartSurface, SciChartJsNavyTheme, XyDataSeries, FastLineRenderableSeries, FastColumnRenderableSeries, NumericAxis, DateTimeNumericAxis, EAutoRange, EAxisAlignment, NumberRange, MouseWheelZoomModifier, RubberBandXyZoomModifier, ZoomExtentsModifier, RolloverModifier } = SciChart;
+    const { SciChartSurface, SciChartJSLightTheme, SciChartJSDarkv2Theme, XyDataSeries, FastLineRenderableSeries, SplineLineRenderableSeries, FastColumnRenderableSeries, StackedColumnRenderableSeries, StackedMountainRenderableSeries, StackedColumnCollection, StackedMountainCollection, NumericAxis, DateTimeNumericAxis, EAutoRange, EAxisAlignment, NumberRange, MouseWheelZoomModifier, RubberBandXyZoomModifier, ZoomExtentsModifier, RolloverModifier, SmartDateLabelProvider, EllipsePointMarker, SquarePointMarker, TrianglePointMarker, CrossPointMarker, XPointMarker, WaveAnimation, LegendModifier } = SciChart;
     const { type: chartType, options, data: fromData } = config;
-    const { theme, legend, scales: fromScales, xGridLine, yGridLine, y2ndGridLine } = options || {};
     const { datasets = [] } = fromData || {};
+    var { theme, tooltip, animation, legend, scales: fromScales, xGridLine, yGridLine, y2ndGridLine, stacked } = options || {};
+    var baseColor = getBaseColorFromTheme(theme);
+    if (theme === 'auto') {
+        theme = getThemeFromBrowser();
+    }
+    fontColor = fontColor || baseColor.clone().toString();
     const { xAxes = [], yAxes = [] } = fromScales || {};
     const chart = await SciChartSurface.create(container, {
-        theme: new SciChartJsNavyTheme()
+        theme: theme == 'dark' ? new SciChartJSDarkv2Theme() : new SciChartJSLightTheme()
     });
     const { sciChartSurface, wasmContext } = chart;
     // X 축 설정
     xAxes.forEach((axis, index) => {
         const { axisTitle, ticks } = axis;
-        const { autoMax, autoMin, min, max, stepSize, beginAtZero } = ticks || {};
-        const id = xAxes.length > 1 ? `x${index + 1}` : 'x';
+        const { autoMax, autoMin, min, max, stepSize, beginAtZero, color = fontColor, textStrokeColor = fontColor, display = !!axisTitle } = ticks || {};
         const xAxis = new DateTimeNumericAxis(wasmContext, {
             axisTitle,
             autoRange: autoMin || autoMax ? EAutoRange.Always : undefined,
@@ -26,13 +37,14 @@ export async function buildSciChart(config, container, { fontSize, fontFamily, f
             labelStyle: {
                 fontFamily,
                 fontSize,
-                color: fontColor
+                color
             },
             axisTitleStyle: {
                 fontFamily,
                 fontSize,
-                color: fontColor
-            }
+                color: textStrokeColor
+            },
+            labelProvider: new SmartDateLabelProvider()
         });
         sciChartSurface.xAxes.add(xAxis);
     });
@@ -40,11 +52,11 @@ export async function buildSciChart(config, container, { fontSize, fontFamily, f
     yAxes.forEach((axis, index) => {
         const { axisTitle, ticks } = axis;
         const { autoMax, autoMin, min, max, stepSize, beginAtZero } = ticks || {};
-        const id = yAxes.length > 1 ? `right` : 'left';
         const yAxis = new NumericAxis(wasmContext, {
+            id: `yAxis${index}`,
             axisTitle,
             autoRange: autoMin || autoMax ? EAutoRange.Always : undefined,
-            axisAlignment: yAxes.length > 1 ? EAxisAlignment.Right : EAxisAlignment.Left,
+            axisAlignment: index === 0 ? EAxisAlignment.Left : EAxisAlignment.Right,
             visibleRange: min !== undefined && max !== undefined ? new NumberRange(min, max) : undefined,
             majorDelta: stepSize,
             growBy: beginAtZero ? new NumberRange(0.1, 0.1) : undefined,
@@ -67,34 +79,162 @@ export async function buildSciChart(config, container, { fontSize, fontFamily, f
             dataSeriesName: dataset.label,
             containsNaN: false
         });
+        const yAxisId = dataset.yAxisID || 'yAxis0';
+        const stackGroupId = dataset.stack || `__stack${index}__`;
         let series;
         if (dataset.type === 'bar') {
-            series = new FastColumnRenderableSeries(wasmContext, {
-                dataSeries,
-                strokeThickness: dataset.borderWidth || 2,
-                fill: dataset.backgroundColor || '#FF6600'
-            });
+            if (stacked) {
+                series = new StackedColumnRenderableSeries(wasmContext, {
+                    dataSeries,
+                    strokeThickness: dataset.borderWidth || 2,
+                    fill: dataset.backgroundColor || '#FF6600',
+                    yAxisId,
+                    stackedGroupId: stackGroupId
+                });
+            }
+            else {
+                series = new FastColumnRenderableSeries(wasmContext, {
+                    dataSeries,
+                    strokeThickness: dataset.borderWidth || 2,
+                    fill: dataset.backgroundColor || '#FF6600',
+                    animation: animation && new WaveAnimation({ duration: 1000, fadeEffect: true }),
+                    yAxisId
+                });
+            }
         }
         else {
-            series = new FastLineRenderableSeries(wasmContext, {
-                dataSeries,
-                strokeThickness: dataset.borderWidth || 2,
-                stroke: dataset.color || '#FF6600'
-            });
+            const { pointStyle, lineTension } = dataset;
+            let pointMarker;
+            switch (pointStyle) {
+                case 'circle':
+                    pointMarker = new EllipsePointMarker(wasmContext, {
+                        width: 10,
+                        height: 10,
+                        strokeThickness: 2,
+                        fill: dataset.color || '#FF6600',
+                        stroke: '#000000'
+                    });
+                    break;
+                case 'triangle':
+                    pointMarker = new TrianglePointMarker(wasmContext, {
+                        width: 10,
+                        height: 10,
+                        strokeThickness: 2,
+                        fill: dataset.color || '#FF6600',
+                        stroke: '#000000'
+                    });
+                    break;
+                case 'rect':
+                    pointMarker = new SquarePointMarker(wasmContext, {
+                        width: 10,
+                        height: 10,
+                        strokeThickness: 2,
+                        fill: dataset.color || '#FF6600',
+                        stroke: '#000000'
+                    });
+                    break;
+                case 'cross':
+                    pointMarker = new CrossPointMarker(wasmContext, {
+                        width: 10,
+                        height: 10,
+                        strokeThickness: 2,
+                        fill: dataset.color || '#FF6600',
+                        stroke: '#000000'
+                    });
+                    break;
+                case 'crossRot':
+                    pointMarker = new XPointMarker(wasmContext, {
+                        width: 10,
+                        height: 10,
+                        strokeThickness: 2,
+                        fill: dataset.color || '#FF6600',
+                        stroke: '#000000'
+                    });
+                    break;
+                default:
+                    pointMarker = new EllipsePointMarker(wasmContext, {
+                        width: 10,
+                        height: 10,
+                        strokeThickness: 2,
+                        fill: dataset.color || '#FF6600',
+                        stroke: '#000000'
+                    });
+            }
+            if (stacked) {
+                series = new StackedMountainRenderableSeries(wasmContext, {
+                    dataSeries,
+                    strokeThickness: dataset.borderWidth || 2,
+                    stroke: dataset.color || '#FF6600',
+                    fill: dataset.backgroundColor || '#FF6600',
+                    yAxisId,
+                    stackedGroupId: stackGroupId
+                });
+            }
+            else {
+                series =
+                    !!lineTension && lineTension > 0
+                        ? new SplineLineRenderableSeries(wasmContext, {
+                            dataSeries,
+                            strokeThickness: dataset.borderWidth || 2,
+                            stroke: dataset.color || '#FF6600',
+                            pointMarker,
+                            animation: animation && new WaveAnimation({ duration: 1000, fadeEffect: true }),
+                            yAxisId
+                        })
+                        : new FastLineRenderableSeries(wasmContext, {
+                            dataSeries,
+                            strokeThickness: dataset.borderWidth || 2,
+                            stroke: dataset.color || '#FF6600',
+                            pointMarker,
+                            animation: animation && new WaveAnimation({ duration: 1000, fadeEffect: true }),
+                            yAxisId
+                        });
+            }
         }
         sciChartSurface.renderableSeries.add(series);
-        const rolloverModifier = new RolloverModifier({
-            showTooltip: true,
-            showAxisLabels: true,
-            tooltipColor: 'white',
-            tooltipBackgroundColor: 'rgba(0, 0, 0, 0.7)',
-            rollOverDataSeries: dataSeries
-        });
-        sciChartSurface.chartModifiers.add(rolloverModifier);
+        if (tooltip) {
+            const rolloverModifier = new RolloverModifier({
+                showTooltip: true,
+                showAxisLabels: true,
+                tooltipColor: 'white',
+                tooltipBackgroundColor: 'rgba(0, 0, 0, 0.7)',
+                rollOverDataSeries: dataSeries
+            });
+            sciChartSurface.chartModifiers.add(rolloverModifier);
+        }
         return dataSeries;
     });
+    // Stacked collections 추가
+    if (stacked) {
+        const stackedColumnCollection = new StackedColumnCollection(wasmContext);
+        const stackedMountainCollection = new StackedMountainCollection(wasmContext);
+        sciChartSurface.renderableSeries.asArray().forEach((series) => {
+            if (series instanceof StackedColumnRenderableSeries) {
+                stackedColumnCollection.add(series);
+            }
+            else if (series instanceof StackedMountainRenderableSeries) {
+                stackedMountainCollection.add(series);
+            }
+        });
+        if (stackedColumnCollection.size() > 0) {
+            sciChartSurface.renderableSeries.add(stackedColumnCollection);
+        }
+        if (stackedMountainCollection.size() > 0) {
+            sciChartSurface.renderableSeries.add(stackedMountainCollection);
+        }
+    }
     // 줌인/줌아웃 모디파이어 추가
     sciChartSurface.chartModifiers.add(new RubberBandXyZoomModifier(), new MouseWheelZoomModifier(), new ZoomExtentsModifier());
+    // Legend 설정
+    if (legend?.display) {
+        const legendModifier = new LegendModifier({
+            showCheckboxes: true,
+            showSeriesMarkers: true,
+            showLegend: true,
+            placement: legend.position || 'bottom-right'
+        });
+        sciChartSurface.chartModifiers.add(legendModifier);
+    }
     return { chart, dataSeries: dataSeriesArray };
 }
 //# sourceMappingURL=scichart-builder.js.map

package/dist/src/scichart/scichart-builder.js.map

@@ -1 +1 @@
-{"version":3,"file":"scichart-builder.js","sourceRoot":"","sources":["../../../src/scichart/scichart-builder.ts"],"names":[],"mappings":"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","sourcesContent":["import { TinyColor } from '@ctrl/tinycolor'\nimport { format as formatText } from '../utils/text-formatter'\n\nexport async function buildSciChart(\n  config: OperatoChart.ChartConfig | undefined | null,\n  container: any,\n  { fontSize, fontFamily, fontColor = 'red' }: { fontSize?: number; fontFamily?: string; fontColor?: string }\n): Promise<{ chart: any; dataSeries: any[] } | undefined> {\n  if (!config) {\n    return\n  }\n\n  const {\n    SciChartSurface,\n    SciChartJsNavyTheme,\n    XyDataSeries,\n    FastLineRenderableSeries,\n    FastColumnRenderableSeries,\n    NumericAxis,\n    DateTimeNumericAxis,\n    EAutoRange,\n    EAxisAlignment,\n    NumberRange,\n    MouseWheelZoomModifier,\n    RubberBandXyZoomModifier,\n    ZoomExtentsModifier,\n    RolloverModifier\n  } = SciChart\n\n  const { type: chartType, options, data: fromData } = config\n  const { theme, legend, scales: fromScales, xGridLine, yGridLine, y2ndGridLine } = options || {}\n  const { datasets = [] } = fromData || {}\n\n  const { xAxes = [], yAxes = [] } = fromScales || {}\n\n  const chart = await SciChartSurface.create(container, {\n    theme: new SciChartJsNavyTheme()\n  })\n  const { sciChartSurface, wasmContext } = chart\n\n  // X 축 설정\n  xAxes.forEach((axis, index) => {\n    const { axisTitle, ticks } = axis\n    const { autoMax, autoMin, min, max, stepSize, beginAtZero } = ticks || {}\n    const id = xAxes.length > 1 ? `x${index + 1}` : 'x'\n\n    const xAxis = new DateTimeNumericAxis(wasmContext, {\n      axisTitle,\n      autoRange: autoMin || autoMax ? EAutoRange.Always : undefined,\n      axisAlignment: EAxisAlignment.Bottom,\n      visibleRange: min !== undefined && max !== undefined ? new NumberRange(min, max) : undefined,\n      majorDelta: stepSize,\n      growBy: beginAtZero ? new NumberRange(0.1, 0.1) : undefined,\n      labelStyle: {\n        fontFamily,\n        fontSize,\n        color: fontColor\n      },\n      axisTitleStyle: {\n        fontFamily,\n        fontSize,\n        color: fontColor\n      }\n    })\n\n    sciChartSurface.xAxes.add(xAxis)\n  })\n\n  // Y 축 설정\n  yAxes.forEach((axis, index) => {\n    const { axisTitle, ticks } = axis\n    const { autoMax, autoMin, min, max, stepSize, beginAtZero } = ticks || {}\n    const id = yAxes.length > 1 ? `right` : 'left'\n\n    const yAxis = new NumericAxis(wasmContext, {\n      axisTitle,\n      autoRange: autoMin || autoMax ? EAutoRange.Always : undefined,\n      axisAlignment: yAxes.length > 1 ? EAxisAlignment.Right : EAxisAlignment.Left,\n      visibleRange: min !== undefined && max !== undefined ? new NumberRange(min, max) : undefined,\n      majorDelta: stepSize,\n      growBy: beginAtZero ? new NumberRange(0.1, 0.1) : undefined,\n      labelStyle: {\n        fontFamily,\n        fontSize,\n        color: fontColor\n      },\n      axisTitleStyle: {\n        fontFamily,\n        fontSize,\n        color: fontColor\n      }\n    })\n    sciChartSurface.yAxes.add(yAxis)\n  })\n\n  // 시리즈 설정\n  const dataSeriesArray = datasets.map((dataset, index) => {\n    const dataSeries = new XyDataSeries(wasmContext, {\n      dataSeriesName: dataset.label,\n      containsNaN: false\n    })\n\n    let series: any\n    if (dataset.type === 'bar') {\n      series = new FastColumnRenderableSeries(wasmContext, {\n        dataSeries,\n        strokeThickness: dataset.borderWidth || 2,\n        fill: dataset.backgroundColor || '#FF6600'\n      })\n    } else {\n      series = new FastLineRenderableSeries(wasmContext, {\n        dataSeries,\n        strokeThickness: dataset.borderWidth || 2,\n        stroke: dataset.color || '#FF6600'\n      })\n    }\n\n    sciChartSurface.renderableSeries.add(series)\n\n    const rolloverModifier = new RolloverModifier({\n      showTooltip: true,\n      showAxisLabels: true,\n      tooltipColor: 'white',\n      tooltipBackgroundColor: 'rgba(0, 0, 0, 0.7)',\n      rollOverDataSeries: dataSeries\n    })\n\n    sciChartSurface.chartModifiers.add(rolloverModifier)\n\n    return dataSeries\n  })\n\n  // 줌인/줌아웃 모디파이어 추가\n  sciChartSurface.chartModifiers.add(\n    new RubberBandXyZoomModifier(),\n    new MouseWheelZoomModifier(),\n    new ZoomExtentsModifier()\n  )\n\n  return { chart, dataSeries: dataSeriesArray }\n}\n"]}
+{"version":3,"file":"scichart-builder.js","sourceRoot":"","sources":["../../../src/scichart/scichart-builder.ts"],"names":[],"mappings":"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","sourcesContent":["import { TinyColor } from '@ctrl/tinycolor'\nimport { format as formatText } from '../utils/text-formatter'\n\nfunction getBaseColorFromTheme(theme?: 'light' | 'dark' | 'auto') {\n  return new TinyColor(theme == 'dark' ? '#fff' : '#000')\n}\n\nfunction getThemeFromBrowser() {\n  return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\n}\n\nexport async function buildSciChart(\n  config: OperatoChart.ChartConfig | undefined | null,\n  container: any,\n  { fontSize, fontFamily, fontColor }: { fontSize?: number; fontFamily?: string; fontColor?: string }\n): Promise<{ chart: any; dataSeries: any[] } | undefined> {\n  if (!config) {\n    return\n  }\n\n  const {\n    SciChartSurface,\n    SciChartJSLightTheme,\n    SciChartJSDarkv2Theme,\n    XyDataSeries,\n    FastLineRenderableSeries,\n    SplineLineRenderableSeries,\n    FastColumnRenderableSeries,\n    StackedColumnRenderableSeries,\n    StackedMountainRenderableSeries,\n    StackedColumnCollection,\n    StackedMountainCollection,\n    NumericAxis,\n    DateTimeNumericAxis,\n    EAutoRange,\n    EAxisAlignment,\n    NumberRange,\n    MouseWheelZoomModifier,\n    RubberBandXyZoomModifier,\n    ZoomExtentsModifier,\n    RolloverModifier,\n    SmartDateLabelProvider,\n    EllipsePointMarker,\n    SquarePointMarker,\n    TrianglePointMarker,\n    CrossPointMarker,\n    XPointMarker,\n    WaveAnimation,\n    LegendModifier\n  } = SciChart\n\n  const { type: chartType, options, data: fromData } = config\n  const { datasets = [] } = fromData || {}\n  var {\n    theme,\n    tooltip,\n    animation,\n    legend,\n    scales: fromScales,\n    xGridLine,\n    yGridLine,\n    y2ndGridLine,\n    stacked\n  } = options || {}\n\n  var baseColor = getBaseColorFromTheme(theme)\n\n  if (theme === 'auto') {\n    theme = getThemeFromBrowser()\n  }\n\n  fontColor = fontColor || baseColor.clone().toString()\n\n  const { xAxes = [], yAxes = [] } = fromScales || {}\n\n  const chart = await SciChartSurface.create(container, {\n    theme: theme == 'dark' ? new SciChartJSDarkv2Theme() : new SciChartJSLightTheme()\n  })\n  const { sciChartSurface, wasmContext } = chart\n\n  // X 축 설정\n  xAxes.forEach((axis, index) => {\n    const { axisTitle, ticks } = axis\n    const {\n      autoMax,\n      autoMin,\n      min,\n      max,\n      stepSize,\n      beginAtZero,\n      color = fontColor,\n      textStrokeColor = fontColor,\n      display = !!axisTitle\n    } = ticks || {}\n\n    const xAxis = new DateTimeNumericAxis(wasmContext, {\n      axisTitle,\n      autoRange: autoMin || autoMax ? EAutoRange.Always : undefined,\n      axisAlignment: EAxisAlignment.Bottom,\n      visibleRange: min !== undefined && max !== undefined ? new NumberRange(min, max) : undefined,\n      majorDelta: stepSize,\n      growBy: beginAtZero ? new NumberRange(0.1, 0.1) : undefined,\n      labelStyle: {\n        fontFamily,\n        fontSize,\n        color\n      },\n      axisTitleStyle: {\n        fontFamily,\n        fontSize,\n        color: textStrokeColor\n      },\n      labelProvider: new SmartDateLabelProvider()\n    })\n\n    sciChartSurface.xAxes.add(xAxis)\n  })\n\n  // Y 축 설정\n  yAxes.forEach((axis, index) => {\n    const { axisTitle, ticks } = axis\n    const { autoMax, autoMin, min, max, stepSize, beginAtZero } = ticks || {}\n\n    const yAxis = new NumericAxis(wasmContext, {\n      id: `yAxis${index}`,\n      axisTitle,\n      autoRange: autoMin || autoMax ? EAutoRange.Always : undefined,\n      axisAlignment: index === 0 ? EAxisAlignment.Left : EAxisAlignment.Right,\n      visibleRange: min !== undefined && max !== undefined ? new NumberRange(min, max) : undefined,\n      majorDelta: stepSize,\n      growBy: beginAtZero ? new NumberRange(0.1, 0.1) : undefined,\n      labelStyle: {\n        fontFamily,\n        fontSize,\n        color: fontColor\n      },\n      axisTitleStyle: {\n        fontFamily,\n        fontSize,\n        color: fontColor\n      }\n    })\n\n    sciChartSurface.yAxes.add(yAxis)\n  })\n\n  // 시리즈 설정\n  const dataSeriesArray = datasets.map((dataset, index) => {\n    const dataSeries = new XyDataSeries(wasmContext, {\n      dataSeriesName: dataset.label,\n      containsNaN: false\n    })\n\n    const yAxisId = dataset.yAxisID || 'yAxis0'\n    const stackGroupId = dataset.stack || `__stack${index}__`\n\n    let series: any\n    if (dataset.type === 'bar') {\n      if (stacked) {\n        series = new StackedColumnRenderableSeries(wasmContext, {\n          dataSeries,\n          strokeThickness: dataset.borderWidth || 2,\n          fill: dataset.backgroundColor || '#FF6600',\n          yAxisId,\n          stackedGroupId: stackGroupId\n        })\n      } else {\n        series = new FastColumnRenderableSeries(wasmContext, {\n          dataSeries,\n          strokeThickness: dataset.borderWidth || 2,\n          fill: dataset.backgroundColor || '#FF6600',\n          animation: animation && new WaveAnimation({ duration: 1000, fadeEffect: true }),\n          yAxisId\n        })\n      }\n    } else {\n      const { pointStyle, lineTension } = dataset\n      let pointMarker\n\n      switch (pointStyle) {\n        case 'circle':\n          pointMarker = new EllipsePointMarker(wasmContext, {\n            width: 10,\n            height: 10,\n            strokeThickness: 2,\n            fill: dataset.color || '#FF6600',\n            stroke: '#000000'\n          })\n          break\n        case 'triangle':\n          pointMarker = new TrianglePointMarker(wasmContext, {\n            width: 10,\n            height: 10,\n            strokeThickness: 2,\n            fill: dataset.color || '#FF6600',\n            stroke: '#000000'\n          })\n          break\n        case 'rect':\n          pointMarker = new SquarePointMarker(wasmContext, {\n            width: 10,\n            height: 10,\n            strokeThickness: 2,\n            fill: dataset.color || '#FF6600',\n            stroke: '#000000'\n          })\n          break\n        case 'cross':\n          pointMarker = new CrossPointMarker(wasmContext, {\n            width: 10,\n            height: 10,\n            strokeThickness: 2,\n            fill: dataset.color || '#FF6600',\n            stroke: '#000000'\n          })\n          break\n        case 'crossRot':\n          pointMarker = new XPointMarker(wasmContext, {\n            width: 10,\n            height: 10,\n            strokeThickness: 2,\n            fill: dataset.color || '#FF6600',\n            stroke: '#000000'\n          })\n          break\n        default:\n          pointMarker = new EllipsePointMarker(wasmContext, {\n            width: 10,\n            height: 10,\n            strokeThickness: 2,\n            fill: dataset.color || '#FF6600',\n            stroke: '#000000'\n          })\n      }\n\n      if (stacked) {\n        series = new StackedMountainRenderableSeries(wasmContext, {\n          dataSeries,\n          strokeThickness: dataset.borderWidth || 2,\n          stroke: dataset.color || '#FF6600',\n          fill: dataset.backgroundColor || '#FF6600',\n          yAxisId,\n          stackedGroupId: stackGroupId\n        })\n      } else {\n        series =\n          !!lineTension && lineTension > 0\n            ? new SplineLineRenderableSeries(wasmContext, {\n                dataSeries,\n                strokeThickness: dataset.borderWidth || 2,\n                stroke: dataset.color || '#FF6600',\n                pointMarker,\n                animation: animation && new WaveAnimation({ duration: 1000, fadeEffect: true }),\n                yAxisId\n              })\n            : new FastLineRenderableSeries(wasmContext, {\n                dataSeries,\n                strokeThickness: dataset.borderWidth || 2,\n                stroke: dataset.color || '#FF6600',\n                pointMarker,\n                animation: animation && new WaveAnimation({ duration: 1000, fadeEffect: true }),\n                yAxisId\n              })\n      }\n    }\n\n    sciChartSurface.renderableSeries.add(series)\n\n    if (tooltip) {\n      const rolloverModifier = new RolloverModifier({\n        showTooltip: true,\n        showAxisLabels: true,\n        tooltipColor: 'white',\n        tooltipBackgroundColor: 'rgba(0, 0, 0, 0.7)',\n        rollOverDataSeries: dataSeries\n      })\n\n      sciChartSurface.chartModifiers.add(rolloverModifier)\n    }\n\n    return dataSeries\n  })\n\n  // Stacked collections 추가\n  if (stacked) {\n    const stackedColumnCollection = new StackedColumnCollection(wasmContext)\n    const stackedMountainCollection = new StackedMountainCollection(wasmContext)\n\n    sciChartSurface.renderableSeries.asArray().forEach((series: any) => {\n      if (series instanceof StackedColumnRenderableSeries) {\n        stackedColumnCollection.add(series)\n      } else if (series instanceof StackedMountainRenderableSeries) {\n        stackedMountainCollection.add(series)\n      }\n    })\n\n    if (stackedColumnCollection.size() > 0) {\n      sciChartSurface.renderableSeries.add(stackedColumnCollection)\n    }\n\n    if (stackedMountainCollection.size() > 0) {\n      sciChartSurface.renderableSeries.add(stackedMountainCollection)\n    }\n  }\n\n  // 줌인/줌아웃 모디파이어 추가\n  sciChartSurface.chartModifiers.add(\n    new RubberBandXyZoomModifier(),\n    new MouseWheelZoomModifier(),\n    new ZoomExtentsModifier()\n  )\n\n  // Legend 설정\n  if (legend?.display) {\n    const legendModifier = new LegendModifier({\n      showCheckboxes: true,\n      showSeriesMarkers: true,\n      showLegend: true,\n      placement: legend.position || 'bottom-right'\n    })\n    sciChartSurface.chartModifiers.add(legendModifier)\n  }\n\n  return { chart, dataSeries: dataSeriesArray }\n}\n"]}

package/dist/stories/common.js

@@ -57,9 +57,9 @@ function getRandomInRange(min, max) {
 // 랜덤 데이터를 생성하는 함수
 function generateRandomData(count) {
     const randomData = [];
-    const startTimestamp = Math.floor(Date.now() / 1000); // 현재 시간을 Unix 타임스탬프로 설정
+    const startTimestamp = Math.floor(Date.now()); // 현재 시간을 Unix 타임스탬프로 설정
     for (let i = 0; i < count; i++) {
-        const timestamp = startTimestamp + i * 3; // 3초씩 증가하는 타임스탬프 설정
+        const timestamp = startTimestamp + i * 360 * 30 * 1000; // 3초씩 증가하는 타임스탬프 설정
         const randomCount = getRandomInRange(5, 35); // count 값을 5에서 35 사이로 랜덤 생성
         const randomAverage = getRandomInRange(50, 150); // average 값을 50에서 150 사이로 랜덤 생성
         randomData.push({

package/dist/stories/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sourceRoot":"","sources":["../../stories/common.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,qBAAqB,CACnC,IAA4B,EAC5B,QAAiC;IAEjC,OAAO;QACL,IAAI,EAAE;YACJ,QAAQ,EAAE,QAAQ,IAAI,EAAE;YACxB,YAAY,EAAE,EAAE;SACjB;QACD,OAAO,EAAE;YACP,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI;YACf,MAAM,EAAE;gBACN,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,KAAK;aAChB;YACD,MAAM,EAAE;gBACN,KAAK,EAAE,CAAC,qBAAqB,EAAE,CAAC;gBAChC,KAAK,EAAE,CAAC,qBAAqB,EAAE,EAAE,qBAAqB,EAAE,CAAC,CAAC,oCAAoC;aAC/F;YACD,OAAO,EAAE,KAAK;YACd,SAAS,EAAE,IAAI;YACf,SAAS,EAAE,IAAI;YACf,YAAY,EAAE,KAAK;YACnB,SAAS,EAAE,KAAK;SACjB;QACD,IAAI;KACL,CAAA;AACH,CAAC;AAED,MAAM,UAAU,qBAAqB;IACnC,OAAO;QACL,SAAS,EAAE,EAAE;QACb,UAAU,EAAE,CAAC;QACb,eAAe,EAAE,CAAC;QAClB,aAAa,EAAE,GAAG;QAClB,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;YACb,GAAG,EAAE,SAAS;YACd,GAAG,EAAE,SAAS;YACd,QAAQ,EAAE,SAAS;SACpB;KACF,CAAA;AACH,CAAC;AAED,wBAAwB;AACxB,kDAAkD;AAClD,kDAAkD;AAClD,iDAAiD;AACjD,kDAAkD;AAClD,kDAAkD;AAClD,iDAAiD;AACjD,gDAAgD;AAChD,IAAI;AACJ,sBAAsB;AACtB,SAAS,gBAAgB,CAAC,GAAW,EAAE,GAAW;IAChD,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAA;AAC1D,CAAC;AAED,kBAAkB;AAClB,SAAS,kBAAkB,CAAC,KAAa;IACvC,MAAM,UAAU,GAAG,EAAE,CAAA;IACrB,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,CAAA,CAAC,wBAAwB;IAE7E,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;QAC/B,MAAM,SAAS,GAAG,cAAc,GAAG,CAAC,GAAG,CAAC,CAAA,CAAC,oBAAoB;QAC7D,MAAM,WAAW,GAAG,gBAAgB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA,CAAC,4BAA4B;QACxE,MAAM,aAAa,GAAG,gBAAgB,CAAC,EAAE,EAAE,GAAG,CAAC,CAAA,CAAC,gCAAgC;QAEhF,UAAU,CAAC,IAAI,CAAC;YACd,SAAS,EAAE,SAAS;YACpB,KAAK,EAAE,WAAW;YAClB,OAAO,EAAE,aAAa;SACvB,CAAC,CAAA;IACJ,CAAC;IAED,OAAO,UAAU,CAAA;AACnB,CAAC;AAED,mBAAmB;AACnB,MAAM,CAAC,MAAM,IAAI,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAA","sourcesContent":["export function getDefaultChartConfig(\n  type: OperatoChart.ChartType,\n  datasets?: OperatoChart.Dataset[]\n): OperatoChart.ChartConfig {\n  return {\n    data: {\n      datasets: datasets || [],\n      labelDataKey: ''\n    },\n    options: {\n      theme: 'light',\n      tooltip: true,\n      animation: true,\n      legend: {\n        display: true,\n        position: 'top'\n      },\n      scales: {\n        xAxes: [getDefaultAxisOptions()],\n        yAxes: [getDefaultAxisOptions(), getDefaultAxisOptions()] // Two y-axes for multi-axis support\n      },\n      stacked: false,\n      xGridLine: true,\n      yGridLine: true,\n      y2ndGridLine: false,\n      multiAxis: false\n    },\n    type\n  }\n}\n\nexport function getDefaultAxisOptions(): OperatoChart.AxisOptions {\n  return {\n    axisTitle: '',\n    barSpacing: 0,\n    categorySpacing: 0,\n    barPercentage: 0.9,\n    ticks: {\n      display: true,\n      autoMin: true,\n      autoMax: true,\n      min: undefined,\n      max: undefined,\n      stepSize: undefined\n    }\n  }\n}\n\n// export const data = [\n//   { timestamp: 2010, count: 10, average: 120 },\n//   { timestamp: 2011, count: 20, average: 110 },\n//   { timestamp: 2012, count: 15, average: 80 },\n//   { timestamp: 2013, count: 25, average: 130 },\n//   { timestamp: 2014, count: 22, average: 120 },\n//   { timestamp: 2015, count: 30, average: 60 },\n//   { timestamp: 2016, count: 28, average: 90 }\n// ]\n// 랜덤한 범위의 숫자를 생성하는 함수\nfunction getRandomInRange(min: number, max: number) {\n  return Math.floor(Math.random() * (max - min + 1)) + min\n}\n\n// 랜덤 데이터를 생성하는 함수\nfunction generateRandomData(count: number) {\n  const randomData = []\n  const startTimestamp = Math.floor(Date.now() / 1000) // 현재 시간을 Unix 타임스탬프로 설정\n\n  for (let i = 0; i < count; i++) {\n    const timestamp = startTimestamp + i * 3 // 3초씩 증가하는 타임스탬프 설정\n    const randomCount = getRandomInRange(5, 35) // count 값을 5에서 35 사이로 랜덤 생성\n    const randomAverage = getRandomInRange(50, 150) // average 값을 50에서 150 사이로 랜덤 생성\n\n    randomData.push({\n      timestamp: timestamp,\n      count: randomCount,\n      average: randomAverage\n    })\n  }\n\n  return randomData\n}\n\n// 100개의 랜덤 데이터를 생성\nexport const data = generateRandomData(100)\n"]}
+{"version":3,"file":"common.js","sourceRoot":"","sources":["../../stories/common.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,qBAAqB,CACnC,IAA4B,EAC5B,QAAiC;IAEjC,OAAO;QACL,IAAI,EAAE;YACJ,QAAQ,EAAE,QAAQ,IAAI,EAAE;YACxB,YAAY,EAAE,EAAE;SACjB;QACD,OAAO,EAAE;YACP,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI;YACf,MAAM,EAAE;gBACN,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,KAAK;aAChB;YACD,MAAM,EAAE;gBACN,KAAK,EAAE,CAAC,qBAAqB,EAAE,CAAC;gBAChC,KAAK,EAAE,CAAC,qBAAqB,EAAE,EAAE,qBAAqB,EAAE,CAAC,CAAC,oCAAoC;aAC/F;YACD,OAAO,EAAE,KAAK;YACd,SAAS,EAAE,IAAI;YACf,SAAS,EAAE,IAAI;YACf,YAAY,EAAE,KAAK;YACnB,SAAS,EAAE,KAAK;SACjB;QACD,IAAI;KACL,CAAA;AACH,CAAC;AAED,MAAM,UAAU,qBAAqB;IACnC,OAAO;QACL,SAAS,EAAE,EAAE;QACb,UAAU,EAAE,CAAC;QACb,eAAe,EAAE,CAAC;QAClB,aAAa,EAAE,GAAG;QAClB,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;YACb,GAAG,EAAE,SAAS;YACd,GAAG,EAAE,SAAS;YACd,QAAQ,EAAE,SAAS;SACpB;KACF,CAAA;AACH,CAAC;AAED,wBAAwB;AACxB,kDAAkD;AAClD,kDAAkD;AAClD,iDAAiD;AACjD,kDAAkD;AAClD,kDAAkD;AAClD,iDAAiD;AACjD,gDAAgD;AAChD,IAAI;AACJ,sBAAsB;AACtB,SAAS,gBAAgB,CAAC,GAAW,EAAE,GAAW;IAChD,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAA;AAC1D,CAAC;AAED,kBAAkB;AAClB,SAAS,kBAAkB,CAAC,KAAa;IACvC,MAAM,UAAU,GAAG,EAAE,CAAA;IACrB,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAA,CAAC,wBAAwB;IAEtE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;QAC/B,MAAM,SAAS,GAAG,cAAc,GAAG,CAAC,GAAG,GAAG,GAAG,EAAE,GAAG,IAAI,CAAA,CAAC,oBAAoB;QAC3E,MAAM,WAAW,GAAG,gBAAgB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA,CAAC,4BAA4B;QACxE,MAAM,aAAa,GAAG,gBAAgB,CAAC,EAAE,EAAE,GAAG,CAAC,CAAA,CAAC,gCAAgC;QAEhF,UAAU,CAAC,IAAI,CAAC;YACd,SAAS,EAAE,SAAS;YACpB,KAAK,EAAE,WAAW;YAClB,OAAO,EAAE,aAAa;SACvB,CAAC,CAAA;IACJ,CAAC;IAED,OAAO,UAAU,CAAA;AACnB,CAAC;AAED,mBAAmB;AACnB,MAAM,CAAC,MAAM,IAAI,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAA","sourcesContent":["export function getDefaultChartConfig(\n  type: OperatoChart.ChartType,\n  datasets?: OperatoChart.Dataset[]\n): OperatoChart.ChartConfig {\n  return {\n    data: {\n      datasets: datasets || [],\n      labelDataKey: ''\n    },\n    options: {\n      theme: 'light',\n      tooltip: true,\n      animation: true,\n      legend: {\n        display: true,\n        position: 'top'\n      },\n      scales: {\n        xAxes: [getDefaultAxisOptions()],\n        yAxes: [getDefaultAxisOptions(), getDefaultAxisOptions()] // Two y-axes for multi-axis support\n      },\n      stacked: false,\n      xGridLine: true,\n      yGridLine: true,\n      y2ndGridLine: false,\n      multiAxis: false\n    },\n    type\n  }\n}\n\nexport function getDefaultAxisOptions(): OperatoChart.AxisOptions {\n  return {\n    axisTitle: '',\n    barSpacing: 0,\n    categorySpacing: 0,\n    barPercentage: 0.9,\n    ticks: {\n      display: true,\n      autoMin: true,\n      autoMax: true,\n      min: undefined,\n      max: undefined,\n      stepSize: undefined\n    }\n  }\n}\n\n// export const data = [\n//   { timestamp: 2010, count: 10, average: 120 },\n//   { timestamp: 2011, count: 20, average: 110 },\n//   { timestamp: 2012, count: 15, average: 80 },\n//   { timestamp: 2013, count: 25, average: 130 },\n//   { timestamp: 2014, count: 22, average: 120 },\n//   { timestamp: 2015, count: 30, average: 60 },\n//   { timestamp: 2016, count: 28, average: 90 }\n// ]\n// 랜덤한 범위의 숫자를 생성하는 함수\nfunction getRandomInRange(min: number, max: number) {\n  return Math.floor(Math.random() * (max - min + 1)) + min\n}\n\n// 랜덤 데이터를 생성하는 함수\nfunction generateRandomData(count: number) {\n  const randomData = []\n  const startTimestamp = Math.floor(Date.now()) // 현재 시간을 Unix 타임스탬프로 설정\n\n  for (let i = 0; i < count; i++) {\n    const timestamp = startTimestamp + i * 360 * 30 * 1000 // 3초씩 증가하는 타임스탬프 설정\n    const randomCount = getRandomInRange(5, 35) // count 값을 5에서 35 사이로 랜덤 생성\n    const randomAverage = getRandomInRange(50, 150) // average 값을 50에서 150 사이로 랜덤 생성\n\n    randomData.push({\n      timestamp: timestamp,\n      count: randomCount,\n      average: randomAverage\n    })\n  }\n\n  return randomData\n}\n\n// 100개의 랜덤 데이터를 생성\nexport const data = generateRandomData(100)\n"]}

package/dist/stories/ox-input-chart-timeseries.stories.js

@@ -92,7 +92,7 @@ const Template = ({ value }) => html `
     ></ox-input-chart-timeseries>
     <div id="charts">
       <ox-scichart id="scichart" .data=${data} attr-x="timestamp" attr-y="count"></ox-scichart>
-      <ox-chart-js id="chartjs" .data=${data}></ox-chart-js>
+      <!-- <ox-chart-js id="chartjs" .data=${data}></ox-chart-js> -->
     </div>
   </div>
 `;
@@ -126,8 +126,22 @@ WithData.args = {
         },
         options: {
             scales: {
-                xAxes: [{ ticks: { beginAtZero: true } }],
-                yAxes: [{ ticks: { beginAtZero: true } }]
+                xAxes: [
+                    {
+                        axisTitle: 'timestamp',
+                        ticks: { beginAtZero: true }
+                    }
+                ],
+                yAxes: [
+                    {
+                        axisTitle: 'count',
+                        ticks: { beginAtZero: true }
+                    },
+                    {
+                        axisTitle: 'average',
+                        ticks: { beginAtZero: true }
+                    }
+                ]
             },
             legend: { display: true }
         }
@@ -137,16 +151,13 @@ export const MultiAxis = Template.bind({});
 MultiAxis.args = {
     value: {
         ...getDefaultChartConfig('line'),
-        options: {
-            ...getDefaultChartConfig('line').options,
-            multiAxis: true
-        },
         data: {
             datasets: [
                 {
                     label: 'Bar Series',
                     type: 'bar',
                     dataKey: 'count',
+                    axisTitle: 'count',
                     backgroundColor: 'rgba(255, 99, 132, 0.2)',
                     borderColor: 'rgba(255, 99, 132, 1)',
                     borderWidth: 1,
@@ -156,16 +167,39 @@ MultiAxis.args = {
                     label: 'Line Series',
                     type: 'line',
                     dataKey: 'average',
+                    axisTitle: 'average',
                     color: 'rgba(54, 162, 235, 1)',
                     borderWidth: 1,
                     fill: false,
                     lineTension: 0.4,
-                    pointStyle: 'circle',
+                    pointStyle: 'rect',
                     pointRadius: 3,
                     yAxisID: 'right'
                 }
             ],
             labelDataKey: 'timestamp'
+        },
+        options: {
+            scales: {
+                xAxes: [
+                    {
+                        axisTitle: 'timestamp',
+                        ticks: { beginAtZero: true }
+                    }
+                ],
+                yAxes: [
+                    {
+                        axisTitle: 'count',
+                        ticks: { beginAtZero: true }
+                    },
+                    {
+                        axisTitle: 'average',
+                        ticks: { beginAtZero: true }
+                    }
+                ]
+            },
+            multiAxis: true,
+            legend: { display: true }
         }
     }
 };

package/dist/stories/ox-input-chart-timeseries.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-chart-timeseries.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-timeseries.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport '../src/editors/ox-input-chart-timeseries.js'\nimport '../src/chartjs/ox-chart-js.js'\nimport '../src/scichart/ox-scichart.js'\n\nimport { data, getDefaultChartConfig } from './common.js'\n\nexport default {\n  title: 'ox-input-chart-timeseries',\n  component: 'ox-input-chart-timeseries',\n  argTypes: {\n    value: { control: 'object' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  value: OperatoChart.ChartConfig\n}\n\nfunction showCharts(e: Event) {\n  const target = e.currentTarget as any\n  const config = target.value\n  const chartjs = document.querySelector('#chartjs') as HTMLElement\n  if (chartjs) {\n    ;(chartjs as any).config = { ...config }\n  }\n  const scichart = document.querySelector('#scichart') as HTMLElement\n  if (scichart) {\n    ;(scichart as any).config = config\n  }\n}\n\nconst Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <style>\n    .desc {\n      color: var(--md-sys-color-background);\n      background-color: var(--md-sys-color-on-background);\n      padding: var(--spacing-small);\n    }\n\n    .container {\n      display: flex;\n      flex-direction: row;\n      overflow-y: auto;\n      padding: var(--spacing-medium);\n      gap: var(--spacing-medium);\n\n      color: var(--md-sys-color-on-background);\n      background-color: var(--md-sys-color-background);\n    }\n\n    #editor {\n      width: 300px;\n    }\n\n    #charts {\n      flex: 1;\n\n      display: flex;\n      flex-direction: column;\n      gap: var(--spacing-medium);\n    }\n\n    #chartjs {\n      flex: 1;\n    }\n\n    #scichart {\n      flex: 1;\n    }\n  </style>\n\n  <div class=\"desc\">Type 'count' or 'average' for series dataKey, type 'timestamp' for axis's dataKey</div>\n\n  <div class=\"container\">\n    <ox-input-chart-timeseries\n      chart-type=\"line\"\n      id=\"editor\"\n      .value=${value}\n      @change=${showCharts}\n    ></ox-input-chart-timeseries>\n    <div id=\"charts\">\n      <ox-scichart id=\"scichart\" .data=${data} attr-x=\"timestamp\" attr-y=\"count\"></ox-scichart>\n      <ox-chart-js id=\"chartjs\" .data=${data}></ox-chart-js>\n    </div>\n  </div>\n`\n\nexport const Default = Template.bind({})\nDefault.args = {}\n\nexport const WithData = Template.bind({})\nWithData.args = {\n  value: {\n    ...getDefaultChartConfig('line'),\n    data: {\n      datasets: [\n        {\n          dataKey: 'count',\n          label: 'Line Series count',\n          type: 'line',\n          color: 'rgba(255, 99, 132, 1)',\n          borderWidth: 1\n        },\n        {\n          dataKey: 'average',\n          label: 'Line Series average',\n          type: 'line',\n          color: 'rgba(54, 162, 235, 1)',\n          fill: false,\n          lineTension: 0.4,\n          pointStyle: 'circle',\n          pointRadius: 3\n        }\n      ],\n      labelDataKey: 'timestamp'\n    },\n    options: {\n      scales: {\n        xAxes: [{ ticks: { beginAtZero: true } }],\n        yAxes: [{ ticks: { beginAtZero: true } }]\n      },\n      legend: { display: true }\n    }\n  }\n}\n\nexport const MultiAxis = Template.bind({})\nMultiAxis.args = {\n  value: {\n    ...getDefaultChartConfig('line'),\n    options: {\n      ...getDefaultChartConfig('line').options,\n      multiAxis: true\n    },\n    data: {\n      datasets: [\n        {\n          label: 'Bar Series',\n          type: 'bar',\n          dataKey: 'count',\n          backgroundColor: 'rgba(255, 99, 132, 0.2)',\n          borderColor: 'rgba(255, 99, 132, 1)',\n          borderWidth: 1,\n          yAxisID: 'left'\n        },\n        {\n          label: 'Line Series',\n          type: 'line',\n          dataKey: 'average',\n          color: 'rgba(54, 162, 235, 1)',\n          borderWidth: 1,\n          fill: false,\n          lineTension: 0.4,\n          pointStyle: 'circle',\n          pointRadius: 3,\n          yAxisID: 'right'\n        }\n      ],\n      labelDataKey: 'timestamp'\n    }\n  }\n}\n"]}
+{"version":3,"file":"ox-input-chart-timeseries.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-timeseries.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport '../src/editors/ox-input-chart-timeseries.js'\nimport '../src/chartjs/ox-chart-js.js'\nimport '../src/scichart/ox-scichart.js'\n\nimport { data, getDefaultChartConfig } from './common.js'\n\nexport default {\n  title: 'ox-input-chart-timeseries',\n  component: 'ox-input-chart-timeseries',\n  argTypes: {\n    value: { control: 'object' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  value: OperatoChart.ChartConfig\n}\n\nfunction showCharts(e: Event) {\n  const target = e.currentTarget as any\n  const config = target.value\n  const chartjs = document.querySelector('#chartjs') as HTMLElement\n  if (chartjs) {\n    ;(chartjs as any).config = { ...config }\n  }\n  const scichart = document.querySelector('#scichart') as HTMLElement\n  if (scichart) {\n    ;(scichart as any).config = config\n  }\n}\n\nconst Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <style>\n    .desc {\n      color: var(--md-sys-color-background);\n      background-color: var(--md-sys-color-on-background);\n      padding: var(--spacing-small);\n    }\n\n    .container {\n      display: flex;\n      flex-direction: row;\n      overflow-y: auto;\n      padding: var(--spacing-medium);\n      gap: var(--spacing-medium);\n\n      color: var(--md-sys-color-on-background);\n      background-color: var(--md-sys-color-background);\n    }\n\n    #editor {\n      width: 300px;\n    }\n\n    #charts {\n      flex: 1;\n\n      display: flex;\n      flex-direction: column;\n      gap: var(--spacing-medium);\n    }\n\n    #chartjs {\n      flex: 1;\n    }\n\n    #scichart {\n      flex: 1;\n    }\n  </style>\n\n  <div class=\"desc\">Type 'count' or 'average' for series dataKey, type 'timestamp' for axis's dataKey</div>\n\n  <div class=\"container\">\n    <ox-input-chart-timeseries\n      chart-type=\"line\"\n      id=\"editor\"\n      .value=${value}\n      @change=${showCharts}\n    ></ox-input-chart-timeseries>\n    <div id=\"charts\">\n      <ox-scichart id=\"scichart\" .data=${data} attr-x=\"timestamp\" attr-y=\"count\"></ox-scichart>\n      <!-- <ox-chart-js id=\"chartjs\" .data=${data}></ox-chart-js> -->\n    </div>\n  </div>\n`\n\nexport const Default = Template.bind({})\nDefault.args = {}\n\nexport const WithData = Template.bind({})\nWithData.args = {\n  value: {\n    ...getDefaultChartConfig('line'),\n    data: {\n      datasets: [\n        {\n          dataKey: 'count',\n          label: 'Line Series count',\n          type: 'line',\n          color: 'rgba(255, 99, 132, 1)',\n          borderWidth: 1\n        },\n        {\n          dataKey: 'average',\n          label: 'Line Series average',\n          type: 'line',\n          color: 'rgba(54, 162, 235, 1)',\n          fill: false,\n          lineTension: 0.4,\n          pointStyle: 'circle',\n          pointRadius: 3\n        }\n      ],\n      labelDataKey: 'timestamp'\n    },\n    options: {\n      scales: {\n        xAxes: [\n          {\n            axisTitle: 'timestamp',\n            ticks: { beginAtZero: true }\n          }\n        ],\n        yAxes: [\n          {\n            axisTitle: 'count',\n            ticks: { beginAtZero: true }\n          },\n          {\n            axisTitle: 'average',\n            ticks: { beginAtZero: true }\n          }\n        ]\n      },\n      legend: { display: true }\n    }\n  }\n}\n\nexport const MultiAxis = Template.bind({})\nMultiAxis.args = {\n  value: {\n    ...getDefaultChartConfig('line'),\n    data: {\n      datasets: [\n        {\n          label: 'Bar Series',\n          type: 'bar',\n          dataKey: 'count',\n          axisTitle: 'count',\n          backgroundColor: 'rgba(255, 99, 132, 0.2)',\n          borderColor: 'rgba(255, 99, 132, 1)',\n          borderWidth: 1,\n          yAxisID: 'left'\n        },\n        {\n          label: 'Line Series',\n          type: 'line',\n          dataKey: 'average',\n          axisTitle: 'average',\n          color: 'rgba(54, 162, 235, 1)',\n          borderWidth: 1,\n          fill: false,\n          lineTension: 0.4,\n          pointStyle: 'rect',\n          pointRadius: 3,\n          yAxisID: 'right'\n        }\n      ],\n      labelDataKey: 'timestamp'\n    },\n    options: {\n      scales: {\n        xAxes: [\n          {\n            axisTitle: 'timestamp',\n            ticks: { beginAtZero: true }\n          }\n        ],\n        yAxes: [\n          {\n            axisTitle: 'count',\n            ticks: { beginAtZero: true }\n          },\n          {\n            axisTitle: 'average',\n            ticks: { beginAtZero: true }\n          }\n        ]\n      },\n      multiAxis: true,\n      legend: { display: true }\n    }\n  }\n}\n"]}