@operato/chart 7.0.0-rc.9 → 7.0.1

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

@@ -1,46 +1,100 @@
-export async function buildSciChart(config, container, { fontSize, fontFamily, fontColor }) {
+export async function buildSciChart(config, container, { fontSize, fontFamily, fontColor = 'red' }) {
     if (!config) {
         return;
     }
-    const { SciChartSurface, SciChartDefaults, chartBuilder, SciChartJsNavyTheme, XyDataSeries, FastLineRenderableSeries, NumberRange, EAutoRange, EAxisAlignment, NumericAxis, DateTimeNumericAxis } = SciChart;
+    const { SciChartSurface, SciChartJsNavyTheme, XyDataSeries, FastLineRenderableSeries, FastColumnRenderableSeries, NumericAxis, DateTimeNumericAxis, EAutoRange, EAxisAlignment, NumberRange, MouseWheelZoomModifier, RubberBandXyZoomModifier, ZoomExtentsModifier, RolloverModifier } = SciChart;
     const { type: chartType, options, data: fromData } = config;
-    const { theme, animation, tooltip, stacked, legend, scales: fromScales, xGridLine, yGridLine, y2ndGridLine, multiAxis } = options || {};
+    const { theme, legend, scales: fromScales, xGridLine, yGridLine, y2ndGridLine } = options || {};
     const { datasets = [] } = fromData || {};
     const { xAxes = [], yAxes = [] } = fromScales || {};
-    const toScales = {};
     const chart = await SciChartSurface.create(container, {
         theme: new SciChartJsNavyTheme()
     });
     const { sciChartSurface, wasmContext } = chart;
+    // X 축 설정
     xAxes.forEach((axis, index) => {
-        const { axisTitle, barSpacing, categorySpacing, barPercentage, ticks } = axis;
-        const { autoMax, autoMin } = ticks || {};
+        const { axisTitle, ticks } = axis;
+        const { autoMax, autoMin, min, max, stepSize, beginAtZero } = ticks || {};
         const id = xAxes.length > 1 ? `x${index + 1}` : 'x';
         const xAxis = new DateTimeNumericAxis(wasmContext, {
             axisTitle,
-            autoRange: EAutoRange.Always,
-            axisAlignment: EAxisAlignment.Bottom
-            // visibleRange: new NumberRange(minDate.getTime() / 1000, maxDate.getTime() / 1000)
+            autoRange: autoMin || autoMax ? EAutoRange.Always : undefined,
+            axisAlignment: EAxisAlignment.Bottom,
+            visibleRange: min !== undefined && max !== undefined ? new NumberRange(min, max) : undefined,
+            majorDelta: stepSize,
+            growBy: beginAtZero ? new NumberRange(0.1, 0.1) : undefined,
+            labelStyle: {
+                fontFamily,
+                fontSize,
+                color: fontColor
+            },
+            axisTitleStyle: {
+                fontFamily,
+                fontSize,
+                color: fontColor
+            }
         });
         sciChartSurface.xAxes.add(xAxis);
     });
+    // Y 축 설정
     yAxes.forEach((axis, index) => {
-        const { axisTitle, barSpacing, categorySpacing, barPercentage, ticks } = axis;
-        const { autoMax, autoMin } = ticks || {};
+        const { axisTitle, ticks } = axis;
+        const { autoMax, autoMin, min, max, stepSize, beginAtZero } = ticks || {};
         const id = yAxes.length > 1 ? `right` : 'left';
         const yAxis = new NumericAxis(wasmContext, {
             axisTitle,
-            autoRange: EAutoRange.Always,
-            axisAlignment: yAxes.length > 1 ? EAxisAlignment.Right : EAxisAlignment.Left
+            autoRange: autoMin || autoMax ? EAutoRange.Always : undefined,
+            axisAlignment: yAxes.length > 1 ? EAxisAlignment.Right : EAxisAlignment.Left,
+            visibleRange: min !== undefined && max !== undefined ? new NumberRange(min, max) : undefined,
+            majorDelta: stepSize,
+            growBy: beginAtZero ? new NumberRange(0.1, 0.1) : undefined,
+            labelStyle: {
+                fontFamily,
+                fontSize,
+                color: fontColor
+            },
+            axisTitleStyle: {
+                fontFamily,
+                fontSize,
+                color: fontColor
+            }
         });
         sciChartSurface.yAxes.add(yAxis);
     });
-    const dataSeries = new XyDataSeries(wasmContext);
-    const lineSeries = new FastLineRenderableSeries(wasmContext);
-    lineSeries.strokeThickness = 2;
-    lineSeries.stroke = '#FF6600';
-    lineSeries.dataSeries = dataSeries;
-    sciChartSurface.renderableSeries.add(lineSeries);
-    return { chart, dataSeries };
+    // 시리즈 설정
+    const dataSeriesArray = datasets.map((dataset, index) => {
+        const dataSeries = new XyDataSeries(wasmContext, {
+            dataSeriesName: dataset.label,
+            containsNaN: false
+        });
+        let series;
+        if (dataset.type === 'bar') {
+            series = new FastColumnRenderableSeries(wasmContext, {
+                dataSeries,
+                strokeThickness: dataset.borderWidth || 2,
+                fill: dataset.backgroundColor || '#FF6600'
+            });
+        }
+        else {
+            series = new FastLineRenderableSeries(wasmContext, {
+                dataSeries,
+                strokeThickness: dataset.borderWidth || 2,
+                stroke: dataset.color || '#FF6600'
+            });
+        }
+        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);
+        return dataSeries;
+    });
+    // 줌인/줌아웃 모디파이어 추가
+    sciChartSurface.chartModifiers.add(new RubberBandXyZoomModifier(), new MouseWheelZoomModifier(), new ZoomExtentsModifier());
+    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":["export 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    SciChartDefaults,\n    chartBuilder,\n    SciChartJsNavyTheme,\n    XyDataSeries,\n    FastLineRenderableSeries,\n    NumberRange,\n    EAutoRange,\n    EAxisAlignment,\n    NumericAxis,\n    DateTimeNumericAxis\n  } = SciChart\n\n  const { type: chartType, options, data: fromData } = config\n  const {\n    theme,\n    animation,\n    tooltip,\n    stacked,\n    legend,\n    scales: fromScales,\n    xGridLine,\n    yGridLine,\n    y2ndGridLine,\n    multiAxis\n  } = options || {}\n  const { datasets = [] } = fromData || {}\n\n  const { xAxes = [], yAxes = [] } = fromScales || {}\n  const toScales = {} as any\n\n  const chart = await SciChartSurface.create(container, {\n    theme: new SciChartJsNavyTheme()\n  })\n  const { sciChartSurface, wasmContext } = chart\n\n  xAxes.forEach((axis, index) => {\n    const { axisTitle, barSpacing, categorySpacing, barPercentage, ticks } = axis\n    const { autoMax, autoMin } = ticks || {}\n    const id = xAxes.length > 1 ? `x${index + 1}` : 'x'\n\n    const xAxis = new DateTimeNumericAxis(wasmContext, {\n      axisTitle,\n      autoRange: EAutoRange.Always,\n      axisAlignment: EAxisAlignment.Bottom\n\n      // visibleRange: new NumberRange(minDate.getTime() / 1000, maxDate.getTime() / 1000)\n    })\n\n    sciChartSurface.xAxes.add(xAxis)\n  })\n\n  yAxes.forEach((axis, index) => {\n    const { axisTitle, barSpacing, categorySpacing, barPercentage, ticks } = axis\n    const { autoMax, autoMin } = ticks || {}\n\n    const id = yAxes.length > 1 ? `right` : 'left'\n\n    const yAxis = new NumericAxis(wasmContext, {\n      axisTitle,\n      autoRange: EAutoRange.Always,\n      axisAlignment: yAxes.length > 1 ? EAxisAlignment.Right : EAxisAlignment.Left\n    })\n    sciChartSurface.yAxes.add(yAxis)\n  })\n\n  const dataSeries = new XyDataSeries(wasmContext)\n\n  const lineSeries = new FastLineRenderableSeries(wasmContext)\n  lineSeries.strokeThickness = 2\n  lineSeries.stroke = '#FF6600'\n  lineSeries.dataSeries = dataSeries\n\n  sciChartSurface.renderableSeries.add(lineSeries)\n\n  return { chart, dataSeries }\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\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"]}

package/dist/stories/common.d.ts

@@ -1,7 +1,7 @@
 export declare function getDefaultChartConfig(type: OperatoChart.ChartType, datasets?: OperatoChart.Dataset[]): OperatoChart.ChartConfig;
 export declare function getDefaultAxisOptions(): OperatoChart.AxisOptions;
 export declare const data: {
-    year: number;
+    timestamp: number;
     count: number;
     average: number;
 }[];

package/dist/stories/common.js

@@ -41,13 +41,35 @@ export function getDefaultAxisOptions() {
         }
     };
 }
-export const data = [
-    { year: 2010, count: 10, average: 120 },
-    { year: 2011, count: 20, average: 110 },
-    { year: 2012, count: 15, average: 80 },
-    { year: 2013, count: 25, average: 130 },
-    { year: 2014, count: 22, average: 120 },
-    { year: 2015, count: 30, average: 60 },
-    { year: 2016, count: 28, average: 90 }
-];
+// export const data = [
+//   { timestamp: 2010, count: 10, average: 120 },
+//   { timestamp: 2011, count: 20, average: 110 },
+//   { timestamp: 2012, count: 15, average: 80 },
+//   { timestamp: 2013, count: 25, average: 130 },
+//   { timestamp: 2014, count: 22, average: 120 },
+//   { timestamp: 2015, count: 30, average: 60 },
+//   { timestamp: 2016, count: 28, average: 90 }
+// ]
+// 랜덤한 범위의 숫자를 생성하는 함수
+function getRandomInRange(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+// 랜덤 데이터를 생성하는 함수
+function generateRandomData(count) {
+    const randomData = [];
+    const startTimestamp = Math.floor(Date.now() / 1000); // 현재 시간을 Unix 타임스탬프로 설정
+    for (let i = 0; i < count; i++) {
+        const timestamp = startTimestamp + i * 3; // 3초씩 증가하는 타임스탬프 설정
+        const randomCount = getRandomInRange(5, 35); // count 값을 5에서 35 사이로 랜덤 생성
+        const randomAverage = getRandomInRange(50, 150); // average 값을 50에서 150 사이로 랜덤 생성
+        randomData.push({
+            timestamp: timestamp,
+            count: randomCount,
+            average: randomAverage
+        });
+    }
+    return randomData;
+}
+// 100개의 랜덤 데이터를 생성
+export const data = generateRandomData(100);
 //# sourceMappingURL=common.js.map

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,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;IACvC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;IACvC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;IACtC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;IACvC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;IACvC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;IACtC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;CACvC,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\nexport const data = [\n  { year: 2010, count: 10, average: 120 },\n  { year: 2011, count: 20, average: 110 },\n  { year: 2012, count: 15, average: 80 },\n  { year: 2013, count: 25, average: 130 },\n  { year: 2014, count: 22, average: 120 },\n  { year: 2015, count: 30, average: 60 },\n  { year: 2016, count: 28, average: 90 }\n]\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,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"]}

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

@@ -10,6 +10,20 @@ export default {
         value: { control: 'object' }
     }
 };
+function showCharts(e) {
+    const target = e.currentTarget;
+    const config = target.value;
+    const chartjs = document.querySelector('#chartjs');
+    if (chartjs) {
+        ;
+        chartjs.config = { ...config };
+    }
+    const scichart = document.querySelector('#scichart');
+    if (scichart) {
+        ;
+        scichart.config = config;
+    }
+}
 const Template = ({ value }) => html `
   <link
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
@@ -29,18 +43,21 @@ const Template = ({ value }) => html `
   <link href="/themes/spacing.css" rel="stylesheet" />
 
   <style>
-    .container {
-      width: 100%;
-      height: 100%;
+    .desc {
+      color: var(--md-sys-color-background);
+      background-color: var(--md-sys-color-on-background);
+      padding: var(--spacing-small);
+    }
 
+    .container {
       display: flex;
       flex-direction: row;
       overflow-y: auto;
       padding: var(--spacing-medium);
-    }
+      gap: var(--spacing-medium);
 
-    .container.dark {
-      background-color: black;
+      color: var(--md-sys-color-on-background);
+      background-color: var(--md-sys-color-background);
     }
 
     #editor {
@@ -52,7 +69,7 @@ const Template = ({ value }) => html `
 
       display: flex;
       flex-direction: column;
-      padding: 10px;
+      gap: var(--spacing-medium);
     }
 
     #chartjs {
@@ -64,42 +81,10 @@ const Template = ({ value }) => html `
     }
   </style>
 
-  <div style="background-color: black; color: white;">
-    Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey
-  </div>
+  <div class="desc">Type 'count' or 'average' for series dataKey, type 'timestamp' for axis's dataKey</div>
 
-  <div class="container light">
-    <ox-input-chart-mixed
-      chart-type="bar"
-      id="editor"
-      .value=${value}
-      @change=${(e) => {
-    const target = e.currentTarget;
-    const config = target.value;
-    const chartjs = document.querySelector('#chartjs');
-    if (chartjs) {
-        ;
-        chartjs.config = { ...config };
-    }
-    const scichart = document.querySelector('#scichart');
-    if (scichart) {
-        ;
-        scichart.config = config;
-    }
-    const container = document.querySelector('.container');
-    if (container) {
-        const theme = config.options.theme;
-        if (theme == 'dark') {
-            container.classList.remove('light');
-            container.classList.add('dark');
-        }
-        else {
-            container.classList.remove('dark');
-            container.classList.add('light');
-        }
-    }
-}}
-    ></ox-input-chart-mixed>
+  <div class="container">
+    <ox-input-chart-mixed chart-type="bar" id="editor" .value=${value} @change=${showCharts}></ox-input-chart-mixed>
     <div id="charts">
       <ox-chart-js id="chartjs" .data=${data}></ox-chart-js>
       <ox-scichart id="scichart"></ox-scichart>
@@ -121,7 +106,7 @@ WithData.args = {
                 {
                     label: 'Bar Series',
                     type: 'bar',
-                    // data: [10, 20, 30],
+                    dataKey: 'count',
                     backgroundColor: 'rgba(255, 99, 132, 0.2)',
                     borderColor: 'rgba(255, 99, 132, 1)',
                     borderWidth: 1
@@ -129,7 +114,7 @@ WithData.args = {
                 {
                     label: 'Line Series',
                     type: 'line',
-                    // data: [15, 25, 35],
+                    dataKey: 'average',
                     borderColor: 'rgba(54, 162, 235, 1)',
                     borderWidth: 1,
                     fill: false,
@@ -138,7 +123,7 @@ WithData.args = {
                     pointRadius: 3
                 }
             ],
-            labelDataKey: 'labels'
+            labelDataKey: 'timestamp'
         },
         options: {
             scales: {
@@ -162,7 +147,7 @@ MultiAxis.args = {
                 {
                     label: 'Bar Series',
                     type: 'bar',
-                    // data: [10, 20, 30],
+                    dataKey: 'count',
                     backgroundColor: 'rgba(255, 99, 132, 0.2)',
                     borderColor: 'rgba(255, 99, 132, 1)',
                     borderWidth: 1,
@@ -171,7 +156,7 @@ MultiAxis.args = {
                 {
                     label: 'Line Series',
                     type: 'line',
-                    // data: [15, 25, 35],
+                    dataKey: 'average',
                     borderColor: 'rgba(54, 162, 235, 1)',
                     borderWidth: 1,
                     fill: false,
@@ -181,7 +166,7 @@ MultiAxis.args = {
                     yAxisID: 'right'
                 }
             ],
-            labelDataKey: 'labels'
+            labelDataKey: 'timestamp'
         }
     }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-chart-bar.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-bar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport '../src/editors/ox-input-chart-mixed.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-mixed for bar',\n  component: 'ox-input-chart-mixed',\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\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    .container {\n      width: 100%;\n      height: 100%;\n\n      display: flex;\n      flex-direction: row;\n      overflow-y: auto;\n      padding: var(--spacing-medium);\n    }\n\n    .container.dark {\n      background-color: black;\n    }\n\n    #editor {\n      width: 300px;\n    }\n\n    #charts {\n      flex: 1;\n\n      display: flex;\n      flex-direction: column;\n      padding: 10px;\n    }\n\n    #chartjs {\n      flex: 1;\n    }\n\n    #scichart {\n      flex: 1;\n    }\n  </style>\n\n  <div style=\"background-color: black; color: white;\">\n    Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey\n  </div>\n\n  <div class=\"container light\">\n    <ox-input-chart-mixed\n      chart-type=\"bar\"\n      id=\"editor\"\n      .value=${value}\n      @change=${(e: CustomEvent) => {\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        const container = document.querySelector('.container') as HTMLElement\n        if (container) {\n          const theme = config.options.theme\n          if (theme == 'dark') {\n            container.classList.remove('light')\n            container.classList.add('dark')\n          } else {\n            container.classList.remove('dark')\n            container.classList.add('light')\n          }\n        }\n      }}\n    ></ox-input-chart-mixed>\n    <div id=\"charts\">\n      <ox-chart-js id=\"chartjs\" .data=${data}></ox-chart-js>\n      <ox-scichart id=\"scichart\"></ox-scichart>\n    </div>\n  </div>\n`\n\nexport const Default = Template.bind({})\nDefault.args = {\n  value: {\n    ...getDefaultChartConfig('bar')\n  }\n}\n\nexport const WithData = Template.bind({})\nWithData.args = {\n  value: {\n    ...getDefaultChartConfig('bar'),\n    data: {\n      datasets: [\n        {\n          label: 'Bar Series',\n          type: 'bar',\n          // data: [10, 20, 30],\n          backgroundColor: 'rgba(255, 99, 132, 0.2)',\n          borderColor: 'rgba(255, 99, 132, 1)',\n          borderWidth: 1\n        },\n        {\n          label: 'Line Series',\n          type: 'line',\n          // data: [15, 25, 35],\n          borderColor: 'rgba(54, 162, 235, 1)',\n          borderWidth: 1,\n          fill: false,\n          lineTension: 0.4,\n          pointStyle: 'circle',\n          pointRadius: 3\n        }\n      ],\n      labelDataKey: 'labels'\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('bar'),\n    options: {\n      ...getDefaultChartConfig('bar').options,\n      multiAxis: true\n    },\n    data: {\n      datasets: [\n        {\n          label: 'Bar Series',\n          type: 'bar',\n          // data: [10, 20, 30],\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          // data: [15, 25, 35],\n          borderColor: '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: 'labels'\n    }\n  }\n}\n"]}
+{"version":3,"file":"ox-input-chart-bar.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-bar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport '../src/editors/ox-input-chart-mixed.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-mixed for bar',\n  component: 'ox-input-chart-mixed',\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-mixed chart-type=\"bar\" id=\"editor\" .value=${value} @change=${showCharts}></ox-input-chart-mixed>\n    <div id=\"charts\">\n      <ox-chart-js id=\"chartjs\" .data=${data}></ox-chart-js>\n      <ox-scichart id=\"scichart\"></ox-scichart>\n    </div>\n  </div>\n`\n\nexport const Default = Template.bind({})\nDefault.args = {\n  value: {\n    ...getDefaultChartConfig('bar')\n  }\n}\n\nexport const WithData = Template.bind({})\nWithData.args = {\n  value: {\n    ...getDefaultChartConfig('bar'),\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        },\n        {\n          label: 'Line Series',\n          type: 'line',\n          dataKey: 'average',\n          borderColor: 'rgba(54, 162, 235, 1)',\n          borderWidth: 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('bar'),\n    options: {\n      ...getDefaultChartConfig('bar').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          borderColor: '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"]}

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

@@ -53,7 +53,7 @@ const Template = ({ value, currentSeriesIndex }) => html `
   </style>
 
   <div style="background-color: black; color: white;">
-    Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey
+    Type 'count' or 'average' for series dataKey, type 'timestamp' for axis's dataKey
   </div>
 
   <div class="container light">

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-chart-doughnut.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-doughnut.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,sCAAsC,CAAA;AAC7C,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAEzD,eAAe;IACb,KAAK,EAAE,iCAAiC;IACxC,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,kBAAkB,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC1C;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAkDpE,KAAK;gBACJ,CAAC,CAAc,EAAE,EAAE;IAC3B,MAAM,MAAM,GAAG,CAAC,CAAC,aAAoB,CAAA;IACrC,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAA;IAC3B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAgB,CAAA;IACjE,IAAI,OAAO,EAAE,CAAC;QACZ,CAAC;QAAC,OAAe,CAAC,MAAM,GAAG,EAAE,GAAG,MAAM,EAAE,CAAA;IAC1C,CAAC;IAED,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAgB,CAAA;IACrE,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAA;QAClC,IAAI,KAAK,IAAI,MAAM,EAAE,CAAC;YACpB,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;YACnC,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;QACjC,CAAC;aAAM,CAAC;YACN,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;YAClC,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;QAClC,CAAC;IACH,CAAC;AACH,CAAC;;sCAE+B,IAAI;;CAEzC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,kBAAkB,EAAE,CAAC;CACtB,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACzC,QAAQ,CAAC,IAAI,GAAG;IACd,KAAK,EAAE;QACL,GAAG,qBAAqB,CAAC,UAAU,CAAC;QACpC,IAAI,EAAE;YACJ,QAAQ,EAAE;gBACR;oBACE,KAAK,EAAE,iBAAiB;oBACxB,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;oBAClB,eAAe,EAAE,CAAC,yBAAyB,EAAE,yBAAyB,EAAE,yBAAyB,CAAC;oBAClG,WAAW,EAAE,CAAC,uBAAuB,EAAE,uBAAuB,EAAE,uBAAuB,CAAC;oBACxF,WAAW,EAAE,CAAC;iBACf;aACF;YACD,YAAY,EAAE,QAAQ;SACvB;QACD,OAAO,EAAE;YACP,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;SAC1B;KACF;IACD,kBAAkB,EAAE,CAAC;CACtB,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport '../src/editors/ox-input-chart-pie.js'\nimport '../src/chartjs/ox-chart-js.js'\n\nimport { data, getDefaultChartConfig } from './common.js'\n\nexport default {\n  title: 'ox-input-chart-pie for doughnut',\n  component: 'ox-input-chart-pie',\n  argTypes: {\n    value: { control: 'object' },\n    currentSeriesIndex: { control: 'number' }\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  currentSeriesIndex: number\n}\n\nconst Template: Story<ArgTypes> = ({ value, currentSeriesIndex }: 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    .container {\n      width: 100%;\n      height: 100%;\n\n      display: flex;\n      flex-direction: row;\n      overflow-y: auto;\n      padding: var(--spacing-medium);\n    }\n\n    .container.dark {\n      background-color: black;\n    }\n\n    #editor {\n      width: 300px;\n    }\n\n    #chart {\n      flex: 1;\n    }\n  </style>\n\n  <div style=\"background-color: black; color: white;\">\n    Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey\n  </div>\n\n  <div class=\"container light\">\n    <ox-input-chart-pie\n      chart-type=\"doughnut\"\n      id=\"editor\"\n      .value=${value}\n      @change=${(e: CustomEvent) => {\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\n        const container = document.querySelector('.container') as HTMLElement\n        if (container) {\n          const theme = config.options.theme\n          if (theme == 'dark') {\n            container.classList.remove('light')\n            container.classList.add('dark')\n          } else {\n            container.classList.remove('dark')\n            container.classList.add('light')\n          }\n        }\n      }}\n    ></ox-input-chart-pie>\n    <ox-chart-js id=\"chartjs\" .data=${data}></ox-chart-js>\n  </div>\n`\n\nexport const Default = Template.bind({})\nDefault.args = {\n  currentSeriesIndex: 0\n}\n\nexport const WithData = Template.bind({})\nWithData.args = {\n  value: {\n    ...getDefaultChartConfig('doughnut'),\n    data: {\n      datasets: [\n        {\n          label: 'Doughnut Series',\n          data: [10, 20, 30],\n          backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(75, 192, 192, 0.2)'],\n          borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(75, 192, 192, 1)'],\n          borderWidth: 1\n        }\n      ],\n      labelDataKey: 'labels'\n    },\n    options: {\n      legend: { display: true }\n    }\n  },\n  currentSeriesIndex: 0\n}\n"]}
+{"version":3,"file":"ox-input-chart-doughnut.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-doughnut.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,sCAAsC,CAAA;AAC7C,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAEzD,eAAe;IACb,KAAK,EAAE,iCAAiC;IACxC,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,kBAAkB,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC1C;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAkDpE,KAAK;gBACJ,CAAC,CAAc,EAAE,EAAE;IAC3B,MAAM,MAAM,GAAG,CAAC,CAAC,aAAoB,CAAA;IACrC,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAA;IAC3B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAgB,CAAA;IACjE,IAAI,OAAO,EAAE,CAAC;QACZ,CAAC;QAAC,OAAe,CAAC,MAAM,GAAG,EAAE,GAAG,MAAM,EAAE,CAAA;IAC1C,CAAC;IAED,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAgB,CAAA;IACrE,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAA;QAClC,IAAI,KAAK,IAAI,MAAM,EAAE,CAAC;YACpB,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;YACnC,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;QACjC,CAAC;aAAM,CAAC;YACN,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;YAClC,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;QAClC,CAAC;IACH,CAAC;AACH,CAAC;;sCAE+B,IAAI;;CAEzC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,kBAAkB,EAAE,CAAC;CACtB,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACzC,QAAQ,CAAC,IAAI,GAAG;IACd,KAAK,EAAE;QACL,GAAG,qBAAqB,CAAC,UAAU,CAAC;QACpC,IAAI,EAAE;YACJ,QAAQ,EAAE;gBACR;oBACE,KAAK,EAAE,iBAAiB;oBACxB,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;oBAClB,eAAe,EAAE,CAAC,yBAAyB,EAAE,yBAAyB,EAAE,yBAAyB,CAAC;oBAClG,WAAW,EAAE,CAAC,uBAAuB,EAAE,uBAAuB,EAAE,uBAAuB,CAAC;oBACxF,WAAW,EAAE,CAAC;iBACf;aACF;YACD,YAAY,EAAE,QAAQ;SACvB;QACD,OAAO,EAAE;YACP,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;SAC1B;KACF;IACD,kBAAkB,EAAE,CAAC;CACtB,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport '../src/editors/ox-input-chart-pie.js'\nimport '../src/chartjs/ox-chart-js.js'\n\nimport { data, getDefaultChartConfig } from './common.js'\n\nexport default {\n  title: 'ox-input-chart-pie for doughnut',\n  component: 'ox-input-chart-pie',\n  argTypes: {\n    value: { control: 'object' },\n    currentSeriesIndex: { control: 'number' }\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  currentSeriesIndex: number\n}\n\nconst Template: Story<ArgTypes> = ({ value, currentSeriesIndex }: 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    .container {\n      width: 100%;\n      height: 100%;\n\n      display: flex;\n      flex-direction: row;\n      overflow-y: auto;\n      padding: var(--spacing-medium);\n    }\n\n    .container.dark {\n      background-color: black;\n    }\n\n    #editor {\n      width: 300px;\n    }\n\n    #chart {\n      flex: 1;\n    }\n  </style>\n\n  <div style=\"background-color: black; color: white;\">\n    Type 'count' or 'average' for series dataKey, type 'timestamp' for axis's dataKey\n  </div>\n\n  <div class=\"container light\">\n    <ox-input-chart-pie\n      chart-type=\"doughnut\"\n      id=\"editor\"\n      .value=${value}\n      @change=${(e: CustomEvent) => {\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\n        const container = document.querySelector('.container') as HTMLElement\n        if (container) {\n          const theme = config.options.theme\n          if (theme == 'dark') {\n            container.classList.remove('light')\n            container.classList.add('dark')\n          } else {\n            container.classList.remove('dark')\n            container.classList.add('light')\n          }\n        }\n      }}\n    ></ox-input-chart-pie>\n    <ox-chart-js id=\"chartjs\" .data=${data}></ox-chart-js>\n  </div>\n`\n\nexport const Default = Template.bind({})\nDefault.args = {\n  currentSeriesIndex: 0\n}\n\nexport const WithData = Template.bind({})\nWithData.args = {\n  value: {\n    ...getDefaultChartConfig('doughnut'),\n    data: {\n      datasets: [\n        {\n          label: 'Doughnut Series',\n          data: [10, 20, 30],\n          backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(75, 192, 192, 0.2)'],\n          borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(75, 192, 192, 1)'],\n          borderWidth: 1\n        }\n      ],\n      labelDataKey: 'labels'\n    },\n    options: {\n      legend: { display: true }\n    }\n  },\n  currentSeriesIndex: 0\n}\n"]}

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

@@ -65,7 +65,7 @@ const Template = ({ value }) => html `
   </style>
 
   <div style="background-color: black; color: white;">
-    Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey
+    Type 'count' or 'average' for series dataKey, type 'timestamp' for axis's dataKey
   </div>
   <div class="container light">
     <ox-input-chart-hbar

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-chart-hbar.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-hbar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport '../src/editors/ox-input-chart-hbar.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-hbar',\n  component: 'ox-input-chart-hbar',\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\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    .container {\n      width: 100%;\n      height: 100%;\n\n      display: flex;\n      flex-direction: row;\n      overflow-y: auto;\n      padding: var(--spacing-medium);\n    }\n\n    .container.dark {\n      background-color: black;\n    }\n\n    #editor {\n      width: 300px;\n    }\n\n    #charts {\n      flex: 1;\n\n      display: flex;\n      flex-direction: column;\n      padding: 10px;\n    }\n\n    #chartjs {\n      flex: 1;\n    }\n\n    #scichart {\n      flex: 1;\n    }\n  </style>\n\n  <div style=\"background-color: black; color: white;\">\n    Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey\n  </div>\n  <div class=\"container light\">\n    <ox-input-chart-hbar\n      chart-type=\"horizontalBar\"\n      id=\"editor\"\n      .value=${value}\n      @change=${async (e: CustomEvent) => {\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        const container = document.querySelector('.container') as HTMLElement\n        if (container) {\n          const theme = config.options.theme\n          if (theme == 'dark') {\n            container.classList.remove('light')\n            container.classList.add('dark')\n          } else {\n            container.classList.remove('dark')\n            container.classList.add('light')\n          }\n        }\n      }}\n    ></ox-input-chart-hbar>\n    <div id=\"charts\">\n      <ox-chart-js id=\"chartjs\" .data=${data}></ox-chart-js>\n      <ox-scichart id=\"scichart\"></ox-scichart>\n    </div>\n  </div>\n`\n\nexport const Default = Template.bind({})\nDefault.args = {}\n\n// 다양한 데이터셋과 함께 사용하는 스토리\nexport const WithData = Template.bind({})\nWithData.args = {\n  value: {\n    ...getDefaultChartConfig('bar'),\n    data: {\n      datasets: [\n        {\n          label: 'Series 1',\n          data: [10, 20, 30],\n          backgroundColor: 'rgba(255, 99, 132, 0.2)',\n          borderColor: 'rgba(255, 99, 132, 1)',\n          borderWidth: 1\n        },\n        {\n          label: 'Series 2',\n          data: [15, 25, 35],\n          backgroundColor: 'rgba(54, 162, 235, 0.2)',\n          borderColor: 'rgba(54, 162, 235, 1)',\n          borderWidth: 1\n        }\n      ],\n      labelDataKey: 'labels'\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('bar'),\n    options: {\n      ...getDefaultChartConfig('bar').options,\n      multiAxis: true\n    },\n    data: {\n      datasets: [\n        {\n          label: 'Series 1',\n          data: [10, 20, 30],\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: 'Series 2',\n          data: [15, 25, 35],\n          backgroundColor: 'rgba(54, 162, 235, 0.2)',\n          borderColor: 'rgba(54, 162, 235, 1)',\n          borderWidth: 1,\n          yAxisID: 'right'\n        }\n      ],\n      labelDataKey: 'labels'\n    }\n  }\n}\n"]}
+{"version":3,"file":"ox-input-chart-hbar.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-hbar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport '../src/editors/ox-input-chart-hbar.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-hbar',\n  component: 'ox-input-chart-hbar',\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\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    .container {\n      width: 100%;\n      height: 100%;\n\n      display: flex;\n      flex-direction: row;\n      overflow-y: auto;\n      padding: var(--spacing-medium);\n    }\n\n    .container.dark {\n      background-color: black;\n    }\n\n    #editor {\n      width: 300px;\n    }\n\n    #charts {\n      flex: 1;\n\n      display: flex;\n      flex-direction: column;\n      padding: 10px;\n    }\n\n    #chartjs {\n      flex: 1;\n    }\n\n    #scichart {\n      flex: 1;\n    }\n  </style>\n\n  <div style=\"background-color: black; color: white;\">\n    Type 'count' or 'average' for series dataKey, type 'timestamp' for axis's dataKey\n  </div>\n  <div class=\"container light\">\n    <ox-input-chart-hbar\n      chart-type=\"horizontalBar\"\n      id=\"editor\"\n      .value=${value}\n      @change=${async (e: CustomEvent) => {\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        const container = document.querySelector('.container') as HTMLElement\n        if (container) {\n          const theme = config.options.theme\n          if (theme == 'dark') {\n            container.classList.remove('light')\n            container.classList.add('dark')\n          } else {\n            container.classList.remove('dark')\n            container.classList.add('light')\n          }\n        }\n      }}\n    ></ox-input-chart-hbar>\n    <div id=\"charts\">\n      <ox-chart-js id=\"chartjs\" .data=${data}></ox-chart-js>\n      <ox-scichart id=\"scichart\"></ox-scichart>\n    </div>\n  </div>\n`\n\nexport const Default = Template.bind({})\nDefault.args = {}\n\n// 다양한 데이터셋과 함께 사용하는 스토리\nexport const WithData = Template.bind({})\nWithData.args = {\n  value: {\n    ...getDefaultChartConfig('bar'),\n    data: {\n      datasets: [\n        {\n          label: 'Series 1',\n          data: [10, 20, 30],\n          backgroundColor: 'rgba(255, 99, 132, 0.2)',\n          borderColor: 'rgba(255, 99, 132, 1)',\n          borderWidth: 1\n        },\n        {\n          label: 'Series 2',\n          data: [15, 25, 35],\n          backgroundColor: 'rgba(54, 162, 235, 0.2)',\n          borderColor: 'rgba(54, 162, 235, 1)',\n          borderWidth: 1\n        }\n      ],\n      labelDataKey: 'labels'\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('bar'),\n    options: {\n      ...getDefaultChartConfig('bar').options,\n      multiAxis: true\n    },\n    data: {\n      datasets: [\n        {\n          label: 'Series 1',\n          data: [10, 20, 30],\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: 'Series 2',\n          data: [15, 25, 35],\n          backgroundColor: 'rgba(54, 162, 235, 0.2)',\n          borderColor: 'rgba(54, 162, 235, 1)',\n          borderWidth: 1,\n          yAxisID: 'right'\n        }\n      ],\n      labelDataKey: 'labels'\n    }\n  }\n}\n"]}

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

@@ -65,7 +65,7 @@ const Template = ({ value }) => html `
   </style>
 
   <div style="background-color: black; color: white;">
-    Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey
+    Type 'count' or 'average' for series dataKey, type 'timestamp' for axis's dataKey
   </div>
 
   <div class="container light">

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-chart-line.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-line.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport '../src/editors/ox-input-chart-mixed.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-mixed for line',\n  component: 'ox-input-chart-mixed',\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\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    .container {\n      width: 100%;\n      height: 100%;\n\n      display: flex;\n      flex-direction: row;\n      overflow-y: auto;\n      padding: var(--spacing-medium);\n    }\n\n    .container.dark {\n      background-color: black;\n    }\n\n    #editor {\n      width: 300px;\n    }\n\n    #charts {\n      flex: 1;\n\n      display: flex;\n      flex-direction: column;\n      padding: 10px;\n    }\n\n    #chartjs {\n      flex: 1;\n    }\n\n    #scichart {\n      flex: 1;\n    }\n  </style>\n\n  <div style=\"background-color: black; color: white;\">\n    Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey\n  </div>\n\n  <div class=\"container light\">\n    <ox-input-chart-mixed\n      chart-type=\"line\"\n      id=\"editor\"\n      .value=${value}\n      @change=${(e: CustomEvent) => {\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        const container = document.querySelector('.container') as HTMLElement\n        if (container) {\n          const theme = config.options.theme\n          if (theme == 'dark') {\n            container.classList.remove('light')\n            container.classList.add('dark')\n          } else {\n            container.classList.remove('dark')\n            container.classList.add('light')\n          }\n        }\n      }}\n    ></ox-input-chart-mixed>\n    <div id=\"charts\">\n      <ox-chart-js id=\"chartjs\" .data=${data}></ox-chart-js>\n      <ox-scichart id=\"scichart\"></ox-scichart>\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          label: 'Bar Series',\n          type: 'bar',\n          data: [10, 20, 30],\n          backgroundColor: 'rgba(255, 99, 132, 0.2)',\n          borderColor: 'rgba(255, 99, 132, 1)',\n          borderWidth: 1\n        },\n        {\n          label: 'Line Series',\n          type: 'line',\n          data: [15, 25, 35],\n          borderColor: 'rgba(54, 162, 235, 1)',\n          borderWidth: 1,\n          fill: false,\n          lineTension: 0.4,\n          pointStyle: 'circle',\n          pointRadius: 3\n        }\n      ],\n      labelDataKey: 'labels'\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          data: [10, 20, 30],\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          data: [15, 25, 35],\n          borderColor: '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: 'labels'\n    }\n  }\n}\n"]}
+{"version":3,"file":"ox-input-chart-line.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-line.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport '../src/editors/ox-input-chart-mixed.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-mixed for line',\n  component: 'ox-input-chart-mixed',\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\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    .container {\n      width: 100%;\n      height: 100%;\n\n      display: flex;\n      flex-direction: row;\n      overflow-y: auto;\n      padding: var(--spacing-medium);\n    }\n\n    .container.dark {\n      background-color: black;\n    }\n\n    #editor {\n      width: 300px;\n    }\n\n    #charts {\n      flex: 1;\n\n      display: flex;\n      flex-direction: column;\n      padding: 10px;\n    }\n\n    #chartjs {\n      flex: 1;\n    }\n\n    #scichart {\n      flex: 1;\n    }\n  </style>\n\n  <div style=\"background-color: black; color: white;\">\n    Type 'count' or 'average' for series dataKey, type 'timestamp' for axis's dataKey\n  </div>\n\n  <div class=\"container light\">\n    <ox-input-chart-mixed\n      chart-type=\"line\"\n      id=\"editor\"\n      .value=${value}\n      @change=${(e: CustomEvent) => {\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        const container = document.querySelector('.container') as HTMLElement\n        if (container) {\n          const theme = config.options.theme\n          if (theme == 'dark') {\n            container.classList.remove('light')\n            container.classList.add('dark')\n          } else {\n            container.classList.remove('dark')\n            container.classList.add('light')\n          }\n        }\n      }}\n    ></ox-input-chart-mixed>\n    <div id=\"charts\">\n      <ox-chart-js id=\"chartjs\" .data=${data}></ox-chart-js>\n      <ox-scichart id=\"scichart\"></ox-scichart>\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          label: 'Bar Series',\n          type: 'bar',\n          data: [10, 20, 30],\n          backgroundColor: 'rgba(255, 99, 132, 0.2)',\n          borderColor: 'rgba(255, 99, 132, 1)',\n          borderWidth: 1\n        },\n        {\n          label: 'Line Series',\n          type: 'line',\n          data: [15, 25, 35],\n          borderColor: 'rgba(54, 162, 235, 1)',\n          borderWidth: 1,\n          fill: false,\n          lineTension: 0.4,\n          pointStyle: 'circle',\n          pointRadius: 3\n        }\n      ],\n      labelDataKey: 'labels'\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          data: [10, 20, 30],\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          data: [15, 25, 35],\n          borderColor: '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: 'labels'\n    }\n  }\n}\n"]}

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

@@ -53,7 +53,7 @@ const Template = ({ value, currentSeriesIndex }) => html `
   </style>
 
   <div style="background-color: black; color: white;">
-    Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey
+    Type 'count' or 'average' for series dataKey, type 'timestamp' for axis's dataKey
   </div>
 
   <div class="container light">