@operato/chart 7.0.0 → 7.0.2

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

@@ -10,16 +10,43 @@ let OxSciChart = class OxSciChart extends LitElement {
         this.attrX = 'x';
         this.attrY = 'y';
         this.chart = null;
+        this.dataSeries = [];
     }
     static { this.styles = css `
     :host {
       display: block;
+      width: 100%;
+      height: 100%;
     }
 
-    div {
+    .chart-container {
+      display: flex;
       width: 100%;
       height: 100%;
     }
+
+    .chart-content {
+      flex: 1;
+      position: relative;
+    }
+
+    .legend {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .legend-top,
+    .legend-bottom {
+      width: 100%;
+      height: 50px;
+    }
+
+    .legend-right,
+    .legend-left {
+      width: 150px;
+      height: 100%;
+    }
   `; }
     firstUpdated() {
         this.loadSciChart();
@@ -50,8 +77,9 @@ let OxSciChart = class OxSciChart extends LitElement {
         this.updateDataSeries();
     }
     async updated(changedProperties) {
-        if (changedProperties.has('config')) {
+        if (changedProperties.has('config') && this.config) {
             await this.initializeSciChart();
+            this.updateLegend();
         }
         if (changedProperties.has('data')) {
             this.updateDataSeries();
@@ -59,38 +87,61 @@ let OxSciChart = class OxSciChart extends LitElement {
         }
     }
     updateDataSeries() {
-        if (!this.dataSeries)
+        if (!this.dataSeries?.length)
             return;
-        this.dataSeries.clear();
+        this.dataSeries.forEach(ds => ds.clear());
         const newData = this.dataSet;
-        this.dataSeries.appendRange(newData.map(d => d.xValue), newData.map(d => d.yValue));
+        newData.forEach((data, index) => {
+            this.dataSeries[index].appendRange(data.map(d => d.xValue), data.map(d => d.yValue));
+        });
         this.chart?.sciChartSurface.zoomExtents();
         this.chart?.sciChartSurface.invalidateElement();
     }
     get dataSet() {
-        const { attrX, attrY, data } = this;
+        const { attrX, data } = this;
+        const datasets = this.config?.data?.datasets || [];
         if (!(data instanceof Array)) {
             return [];
         }
-        return data
-            .map(item => {
-            if (!item || typeof item !== 'object') {
-                return;
-            }
-            const xValue = new Date(item[attrX]);
-            if (isNaN(xValue.getTime())) {
-                console.error('Invalid date:', item[attrX]);
-                return;
-            }
-            return {
-                xValue: xValue.getTime() / 1000,
-                yValue: item[attrY]
-            };
-        })
-            .filter(Boolean);
+        return datasets.map(dataset => {
+            return data
+                .map(item => {
+                if (!item || typeof item !== 'object') {
+                    return;
+                }
+                const xValue = new Date(item[attrX]);
+                if (isNaN(xValue.getTime())) {
+                    console.error('Invalid date:', item[attrX]);
+                    return;
+                }
+                return {
+                    xValue: xValue.getTime() / 1000,
+                    yValue: item[dataset.dataKey]
+                };
+            })
+                .filter(Boolean);
+        });
+    }
+    updateLegend() {
+        const legendPosition = this.config?.options?.legend?.position || 'right';
+        const legendElement = this.shadowRoot?.getElementById('legend');
+        if (legendElement) {
+            legendElement.className = `legend legend-${legendPosition}`;
+        }
     }
     render() {
-        return html `<div id="container"></div>`;
+        const legendPosition = this.config?.options?.legend?.position || 'right';
+        return html `
+      <div class="chart-container">
+        ${legendPosition === 'left' ? html `<div id="legend" class="legend legend-left"></div>` : ''}
+        <div class="chart-content">
+          ${legendPosition === 'top' ? html `<div id="legend" class="legend legend-top"></div>` : ''}
+          <div id="container"></div>
+          ${legendPosition === 'bottom' ? html `<div id="legend" class="legend legend-bottom"></div>` : ''}
+        </div>
+        ${legendPosition === 'right' ? html `<div id="legend" class="legend legend-right"></div>` : ''}
+      </div>
+    `;
     }
 };
 __decorate([
@@ -108,6 +159,9 @@ __decorate([
 __decorate([
     query('div#container')
 ], OxSciChart.prototype, "container", void 0);
+__decorate([
+    query('div#legend')
+], OxSciChart.prototype, "legendContainer", void 0);
 OxSciChart = __decorate([
     customElement('ox-scichart')
 ], OxSciChart);

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

@@ -1 +1 @@
-{"version":3,"file":"ox-scichart.js","sourceRoot":"","sources":["../../../src/scichart/ox-scichart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { property, query, customElement } from 'lit/decorators.js'\nimport { buildSciChart } from './scichart-builder'\n\n// 전역 변수로 SciChart 로딩 상태 관리\ndeclare global {\n  interface Window {\n    sciChartLoaded: boolean\n    sciChartLoadingPromise: Promise<void>\n  }\n}\n\n@customElement('ox-scichart')\nclass OxSciChart extends LitElement {\n  @property({ type: Object }) config: OperatoChart.ChartConfig | null = null\n  @property({ type: Array }) data: { [attr: string]: any }[] = []\n  @property({ type: String, attribute: 'attr-x' }) attrX: string = 'x'\n  @property({ type: String, attribute: 'attr-y' }) attrY: string = 'y'\n\n  private chart: any = null\n  dataSeries?: any\n\n  @query('div#container') container!: HTMLDivElement\n\n  static styles = css`\n    :host {\n      display: block;\n    }\n\n    div {\n      width: 100%;\n      height: 100%;\n    }\n  `\n\n  firstUpdated() {\n    this.loadSciChart()\n  }\n\n  async loadSciChart() {\n    if (!window.sciChartLoaded) {\n      if (!window.sciChartLoadingPromise) {\n        window.sciChartLoadingPromise = new Promise<void>(resolve => {\n          const script = document.createElement('script')\n          script.src = 'https://cdn.jsdelivr.net/npm/scichart/index.min.js'\n          script.crossOrigin = 'anonymous'\n          script.onload = () => {\n            window.sciChartLoaded = true\n\n            SciChart.SciChartSurface.UseCommunityLicense()\n\n            resolve()\n          }\n          document.head.appendChild(script)\n        })\n      }\n\n      await window.sciChartLoadingPromise\n    }\n\n    this.initializeSciChart()\n  }\n\n  async initializeSciChart() {\n    const { chart, dataSeries } = (await buildSciChart(this.config, this.container, {})) || {}\n\n    this.chart = chart\n    this.dataSeries = dataSeries\n\n    this.updateDataSeries()\n  }\n\n  async updated(changedProperties: Map<string | number | symbol, unknown>) {\n    if (changedProperties.has('config')) {\n      await this.initializeSciChart()\n    }\n\n    if (changedProperties.has('data')) {\n      this.updateDataSeries()\n      this.chart?.sciChartSurface.zoomExtents()\n    }\n  }\n\n  updateDataSeries() {\n    if (!this.dataSeries) return\n\n    this.dataSeries.clear()\n    const newData = this.dataSet\n\n    this.dataSeries.appendRange(\n      newData.map(d => d.xValue),\n      newData.map(d => d.yValue)\n    )\n\n    this.chart?.sciChartSurface.zoomExtents()\n    this.chart?.sciChartSurface.invalidateElement()\n  }\n\n  get dataSet(): { xValue: number; yValue: number }[] {\n    const { attrX, attrY, data } = this\n\n    if (!(data instanceof Array)) {\n      return []\n    }\n\n    return data\n      .map(item => {\n        if (!item || typeof item !== 'object') {\n          return\n        }\n\n        const xValue = new Date(item[attrX])\n        if (isNaN(xValue.getTime())) {\n          console.error('Invalid date:', item[attrX])\n          return\n        }\n\n        return {\n          xValue: xValue.getTime() / 1000,\n          yValue: item[attrY]\n        }\n      })\n      .filter(Boolean) as { xValue: number; yValue: number }[]\n  }\n\n  render() {\n    return html`<div id=\"container\"></div>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ox-scichart': OxSciChart\n  }\n}\n"]}
+{"version":3,"file":"ox-scichart.js","sourceRoot":"","sources":["../../../src/scichart/ox-scichart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { property, query, customElement } from 'lit/decorators.js'\nimport { buildSciChart } from './scichart-builder'\n\ndeclare global {\n  interface Window {\n    sciChartLoaded: boolean\n    sciChartLoadingPromise: Promise<void>\n  }\n}\n\n@customElement('ox-scichart')\nclass OxSciChart extends LitElement {\n  @property({ type: Object }) config: OperatoChart.ChartConfig | null = null\n  @property({ type: Array }) data: { [attr: string]: any }[] = []\n  @property({ type: String, attribute: 'attr-x' }) attrX: string = 'x'\n  @property({ type: String, attribute: 'attr-y' }) attrY: string = 'y'\n\n  private chart: any = null\n  private dataSeries: any[] = []\n\n  @query('div#container') container!: HTMLDivElement\n  @query('div#legend') legendContainer!: HTMLDivElement\n\n  static styles = css`\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    .chart-container {\n      display: flex;\n      width: 100%;\n      height: 100%;\n    }\n\n    .chart-content {\n      flex: 1;\n      position: relative;\n    }\n\n    .legend {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .legend-top,\n    .legend-bottom {\n      width: 100%;\n      height: 50px;\n    }\n\n    .legend-right,\n    .legend-left {\n      width: 150px;\n      height: 100%;\n    }\n  `\n\n  firstUpdated() {\n    this.loadSciChart()\n  }\n\n  async loadSciChart() {\n    if (!window.sciChartLoaded) {\n      if (!window.sciChartLoadingPromise) {\n        window.sciChartLoadingPromise = new Promise<void>(resolve => {\n          const script = document.createElement('script')\n          script.src = 'https://cdn.jsdelivr.net/npm/scichart/index.min.js'\n          script.crossOrigin = 'anonymous'\n          script.onload = () => {\n            window.sciChartLoaded = true\n\n            SciChart.SciChartSurface.UseCommunityLicense()\n\n            resolve()\n          }\n          document.head.appendChild(script)\n        })\n      }\n\n      await window.sciChartLoadingPromise\n    }\n\n    this.initializeSciChart()\n  }\n\n  async initializeSciChart() {\n    const { chart, dataSeries } = (await buildSciChart(this.config, this.container, {})) || {}\n\n    this.chart = chart\n    this.dataSeries = dataSeries!\n\n    this.updateDataSeries()\n  }\n\n  async updated(changedProperties: Map<string | number | symbol, unknown>) {\n    if (changedProperties.has('config') && this.config) {\n      await this.initializeSciChart()\n      this.updateLegend()\n    }\n\n    if (changedProperties.has('data')) {\n      this.updateDataSeries()\n      this.chart?.sciChartSurface.zoomExtents()\n    }\n  }\n\n  updateDataSeries() {\n    if (!this.dataSeries?.length) return\n\n    this.dataSeries.forEach(ds => ds.clear())\n    const newData = this.dataSet\n\n    newData.forEach((data, index) => {\n      this.dataSeries[index].appendRange(\n        data.map(d => d.xValue),\n        data.map(d => d.yValue)\n      )\n    })\n\n    this.chart?.sciChartSurface.zoomExtents()\n    this.chart?.sciChartSurface.invalidateElement()\n  }\n\n  get dataSet(): { xValue: number; yValue: number }[][] {\n    const { attrX, data } = this\n    const datasets = this.config?.data?.datasets || []\n\n    if (!(data instanceof Array)) {\n      return []\n    }\n\n    return datasets.map(dataset => {\n      return data\n        .map(item => {\n          if (!item || typeof item !== 'object') {\n            return\n          }\n\n          const xValue = new Date(item[attrX])\n          if (isNaN(xValue.getTime())) {\n            console.error('Invalid date:', item[attrX])\n            return\n          }\n\n          return {\n            xValue: xValue.getTime() / 1000,\n            yValue: item[dataset.dataKey!]\n          }\n        })\n        .filter(Boolean) as { xValue: number; yValue: number }[]\n    })\n  }\n\n  updateLegend() {\n    const legendPosition = this.config?.options?.legend?.position || 'right'\n    const legendElement = this.shadowRoot?.getElementById('legend')\n    if (legendElement) {\n      legendElement.className = `legend legend-${legendPosition}`\n    }\n  }\n\n  render() {\n    const legendPosition = this.config?.options?.legend?.position || 'right'\n    return html`\n      <div class=\"chart-container\">\n        ${legendPosition === 'left' ? html`<div id=\"legend\" class=\"legend legend-left\"></div>` : ''}\n        <div class=\"chart-content\">\n          ${legendPosition === 'top' ? html`<div id=\"legend\" class=\"legend legend-top\"></div>` : ''}\n          <div id=\"container\"></div>\n          ${legendPosition === 'bottom' ? html`<div id=\"legend\" class=\"legend legend-bottom\"></div>` : ''}\n        </div>\n        ${legendPosition === 'right' ? html`<div id=\"legend\" class=\"legend legend-right\"></div>` : ''}\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ox-scichart': OxSciChart\n  }\n}\n"]}

package/dist/src/scichart/scichart-builder.d.ts

@@ -4,5 +4,5 @@ export declare function buildSciChart(config: OperatoChart.ChartConfig | undefin
     fontColor?: string;
 }): Promise<{
     chart: any;
-    dataSeries: any;
+    dataSeries: any[];
 } | undefined>;

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

@@ -1,46 +1,240 @@
+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, SciChartDefaults, chartBuilder, SciChartJsNavyTheme, XyDataSeries, FastLineRenderableSeries, NumberRange, EAutoRange, EAxisAlignment, NumericAxis, DateTimeNumericAxis } = 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, animation, tooltip, stacked, legend, scales: fromScales, xGridLine, yGridLine, y2ndGridLine, multiAxis } = 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 toScales = {};
     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, barSpacing, categorySpacing, barPercentage, ticks } = axis;
-        const { autoMax, autoMin } = ticks || {};
-        const id = xAxes.length > 1 ? `x${index + 1}` : 'x';
+        const { axisTitle, ticks } = axis;
+        const { autoMax, autoMin, min, max, stepSize, beginAtZero, color = fontColor, textStrokeColor = fontColor, display = !!axisTitle } = ticks || {};
         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
+            },
+            axisTitleStyle: {
+                fontFamily,
+                fontSize,
+                color: textStrokeColor
+            },
+            labelProvider: new SmartDateLabelProvider()
         });
         sciChartSurface.xAxes.add(xAxis);
     });
+    // Y 축 설정
     yAxes.forEach((axis, index) => {
-        const { axisTitle, barSpacing, categorySpacing, barPercentage, ticks } = axis;
-        const { autoMax, autoMin } = ticks || {};
-        const id = yAxes.length > 1 ? `right` : 'left';
+        const { axisTitle, ticks } = axis;
+        const { autoMax, autoMin, min, max, stepSize, beginAtZero } = ticks || {};
         const yAxis = new NumericAxis(wasmContext, {
+            id: `yAxis${index}`,
             axisTitle,
-            autoRange: EAutoRange.Always,
-            axisAlignment: yAxes.length > 1 ? EAxisAlignment.Right : EAxisAlignment.Left
+            autoRange: autoMin || autoMax ? EAutoRange.Always : undefined,
+            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,
+            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
+        });
+        const yAxisId = dataset.yAxisID || 'yAxis0';
+        const stackGroupId = dataset.stack || `__stack${index}__`;
+        let series;
+        if (dataset.type === 'bar') {
+            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 {
+            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);
+        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":["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\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.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()); // 현재 시간을 Unix 타임스탬프로 설정
+    for (let i = 0; i < count; i++) {
+        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({
+            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,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"]}