@operato/chart 2.0.0-beta.35 → 7.0.0-rc.10

package/dist/src/utils/text-formatter.js

@@ -0,0 +1,78 @@
+export function format(mask, value) {
+    if (!mask || isNaN(+value)) {
+        return value.toString(); // return as it is.
+    }
+    let isNegative, result, decimal, group, posLeadZero, posTrailZero, posSeparator, part, szSep, integer, 
+    // find prefix/suffix
+    len = mask.length, start = mask.search(/[0-9\-\+#]/), prefix = start > 0 ? mask.substring(0, start) : '', 
+    // reverse string: not an ideal method if there are surrogate pairs
+    str = mask.split('').reverse().join(''), end = str.search(/[0-9\-\+#]/), offset = len - end, substr = mask.substring(offset, offset + 1), indx = offset + (substr === '.' || substr === ',' ? 1 : 0), suffix = end > 0 ? mask.substring(indx, len) : '', splittedMask, splittedValue, stringValue;
+    // mask with prefix & suffix removed
+    mask = mask.substring(start, indx);
+    // convert any string to number according to formation sign.
+    value = mask.charAt(0) === '-' ? -value : +value;
+    isNegative = value < 0 ? ((value = -value), true) : false; // process only abs(), and turn on flag.
+    // search for separator for grp & decimal, anything not digit, not +/- sign, not #.
+    result = mask.match(/[^\d\-\+#]/g);
+    decimal = '.'; // ( result && result[ result.length - 1 ] ) || '.'; // ','는 소수점이 되지 않게 함
+    group = (result && result[1] && result[0]) || ','; // treat the left most symbol as group separator
+    // split the decimal for the format string if any.
+    splittedMask = mask.split(decimal);
+    // Fix the decimal first, toFixed will auto fill trailing zero.
+    value = parseFloat(value.toFixed((splittedMask[1] && splittedMask[1].length) || 0));
+    stringValue = +value + ''; // convert number to string to trim off *all* trailing decimal zero(es)
+    // fill back any trailing zero according to format
+    posTrailZero = (splittedMask[1] && splittedMask[1].lastIndexOf('0')) || 0; // look for last zero in format
+    part = stringValue.split('.');
+    // integer will get !part[1]
+    if (!part[1] || (part[1] && part[1].length <= posTrailZero)) {
+        stringValue = (+value).toFixed(posTrailZero + 1);
+    }
+    szSep = splittedMask[0].split(group); // look for separator
+    splittedMask[0] = szSep.join(''); // join back without separator for counting the pos of any leading 0.
+    posLeadZero = (splittedMask[0] && splittedMask[0].indexOf('0')) || 0;
+    if (posLeadZero > -1) {
+        while (part[0].length < splittedMask[0].length - posLeadZero) {
+            part[0] = '0' + part[0];
+        }
+    }
+    else if (+part[0] === 0) {
+        part[0] = '';
+    }
+    splittedValue = stringValue.split('.');
+    splittedValue[0] = part[0];
+    // process the first group separator from decimal (.) only, the rest ignore.
+    // get the length of the last slice of split result.
+    posSeparator = (szSep[1] && szSep[szSep.length - 1].length) || 0;
+    if (posSeparator) {
+        integer = splittedValue[0];
+        str = '';
+        offset = integer.length % posSeparator;
+        len = integer.length;
+        for (indx = 0; indx < len; indx++) {
+            str += integer.charAt(indx); // ie6 only support charAt for sz.
+            // -posSeparator so that won't trail separator on full length
+            /* jshint -W018 */
+            if (!((indx - offset + 1) % posSeparator) && indx < len - posSeparator) {
+                str += group;
+            }
+        }
+        splittedValue[0] = str;
+    }
+    splittedValue[1] = splittedMask[1] && splittedValue[1] ? decimal + splittedValue[1] : '';
+    // remove negative sign if result is zero
+    result = splittedValue.join('');
+    if (result === '0' || result === '') {
+        // remove negative sign if result is zero
+        isNegative = false;
+    }
+    // 앞에 +가 붙는다면 양수일 경우에도 +를 표기해줌
+    let fixedPlusSign;
+    if (splittedMask[0].substring(0, 1) === '+')
+        fixedPlusSign = isNegative ? '-' : '+';
+    else
+        fixedPlusSign = isNegative ? '-' : '';
+    // put back any negation, combine integer and fraction, and add back prefix & suffix
+    return prefix + (fixedPlusSign + result) + suffix;
+}
+//# sourceMappingURL=text-formatter.js.map

package/dist/src/utils/text-formatter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-formatter.js","sourceRoot":"","sources":["../../../src/utils/text-formatter.ts"],"names":[],"mappings":"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","sourcesContent":["export function format(mask: string, value: number): string {\n  if (!mask || isNaN(+value)) {\n    return value.toString() // return as it is.\n  }\n\n  let isNegative: boolean,\n    result: string | RegExpMatchArray | null,\n    decimal: string,\n    group: string,\n    posLeadZero: number,\n    posTrailZero: number,\n    posSeparator: number,\n    part: string[],\n    szSep: string[],\n    integer: string,\n    // find prefix/suffix\n    len = mask.length,\n    start = mask.search(/[0-9\\-\\+#]/),\n    prefix = start > 0 ? mask.substring(0, start) : '',\n    // reverse string: not an ideal method if there are surrogate pairs\n    str = mask.split('').reverse().join(''),\n    end = str.search(/[0-9\\-\\+#]/),\n    offset = len - end,\n    substr = mask.substring(offset, offset + 1),\n    indx = offset + (substr === '.' || substr === ',' ? 1 : 0),\n    suffix = end > 0 ? mask.substring(indx, len) : '',\n    splittedMask: string[],\n    splittedValue: string[],\n    stringValue: string\n\n  // mask with prefix & suffix removed\n  mask = mask.substring(start, indx)\n\n  // convert any string to number according to formation sign.\n  value = mask.charAt(0) === '-' ? -value : +value\n  isNegative = value < 0 ? ((value = -value), true) : false // process only abs(), and turn on flag.\n\n  // search for separator for grp & decimal, anything not digit, not +/- sign, not #.\n  result = mask.match(/[^\\d\\-\\+#]/g)\n  decimal = '.' // ( result && result[ result.length - 1 ] ) || '.'; // ','는 소수점이 되지 않게 함\n  group = (result && result[1] && result[0]) || ',' // treat the left most symbol as group separator\n\n  // split the decimal for the format string if any.\n  splittedMask = mask.split(decimal)\n  // Fix the decimal first, toFixed will auto fill trailing zero.\n  value = parseFloat(value.toFixed((splittedMask[1] && splittedMask[1].length) || 0))\n  stringValue = +value + '' // convert number to string to trim off *all* trailing decimal zero(es)\n\n  // fill back any trailing zero according to format\n  posTrailZero = (splittedMask[1] && splittedMask[1].lastIndexOf('0')) || 0 // look for last zero in format\n  part = stringValue.split('.')\n  // integer will get !part[1]\n  if (!part[1] || (part[1] && part[1].length <= posTrailZero)) {\n    stringValue = (+value).toFixed(posTrailZero + 1)\n  }\n  szSep = splittedMask[0].split(group) // look for separator\n  splittedMask[0] = szSep.join('') // join back without separator for counting the pos of any leading 0.\n\n  posLeadZero = (splittedMask[0] && splittedMask[0].indexOf('0')) || 0\n  if (posLeadZero > -1) {\n    while (part[0].length < splittedMask[0].length - posLeadZero) {\n      part[0] = '0' + part[0]\n    }\n  } else if (+part[0] === 0) {\n    part[0] = ''\n  }\n\n  splittedValue = stringValue.split('.')\n  splittedValue[0] = part[0]\n\n  // process the first group separator from decimal (.) only, the rest ignore.\n  // get the length of the last slice of split result.\n  posSeparator = (szSep[1] && szSep[szSep.length - 1].length) || 0\n  if (posSeparator) {\n    integer = splittedValue[0]\n    str = ''\n    offset = integer.length % posSeparator\n    len = integer.length\n    for (indx = 0; indx < len; indx++) {\n      str += integer.charAt(indx) // ie6 only support charAt for sz.\n      // -posSeparator so that won't trail separator on full length\n      /* jshint -W018 */\n      if (!((indx - offset + 1) % posSeparator) && indx < len - posSeparator) {\n        str += group\n      }\n    }\n    splittedValue[0] = str\n  }\n  splittedValue[1] = splittedMask[1] && splittedValue[1] ? decimal + splittedValue[1] : ''\n\n  // remove negative sign if result is zero\n  result = splittedValue.join('')\n  if (result === '0' || result === '') {\n    // remove negative sign if result is zero\n    isNegative = false\n  }\n\n  // 앞에 +가 붙는다면 양수일 경우에도 +를 표기해줌\n  let fixedPlusSign: string\n\n  if (splittedMask[0].substring(0, 1) === '+') fixedPlusSign = isNegative ? '-' : '+'\n  else fixedPlusSign = isNegative ? '-' : ''\n\n  // put back any negation, combine integer and fraction, and add back prefix & suffix\n  return prefix + (fixedPlusSign + result) + suffix\n}\n"]}

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

@@ -107,7 +107,11 @@ const Template = ({ value }) => html `
   </div>
 `;
 export const Default = Template.bind({});
-Default.args = {};
+Default.args = {
+    value: {
+        ...getDefaultChartConfig('bar')
+    }
+};
 export const WithData = Template.bind({});
 WithData.args = {
     value: {
@@ -117,7 +121,7 @@ WithData.args = {
                 {
                     label: 'Bar Series',
                     type: 'bar',
-                    data: [10, 20, 30],
+                    // data: [10, 20, 30],
                     backgroundColor: 'rgba(255, 99, 132, 0.2)',
                     borderColor: 'rgba(255, 99, 132, 1)',
                     borderWidth: 1
@@ -125,7 +129,7 @@ WithData.args = {
                 {
                     label: 'Line Series',
                     type: 'line',
-                    data: [15, 25, 35],
+                    // data: [15, 25, 35],
                     borderColor: 'rgba(54, 162, 235, 1)',
                     borderWidth: 1,
                     fill: false,
@@ -158,7 +162,7 @@ MultiAxis.args = {
                 {
                     label: 'Bar Series',
                     type: 'bar',
-                    data: [10, 20, 30],
+                    // data: [10, 20, 30],
                     backgroundColor: 'rgba(255, 99, 132, 0.2)',
                     borderColor: 'rgba(255, 99, 132, 1)',
                     borderWidth: 1,
@@ -167,7 +171,7 @@ MultiAxis.args = {
                 {
                     label: 'Line Series',
                     type: 'line',
-                    data: [15, 25, 35],
+                    // data: [15, 25, 35],
                     borderColor: 'rgba(54, 162, 235, 1)',
                     borderWidth: 1,
                     fill: false,

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\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\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"]}

package/dist/stories/ox-input-chart-timeseries.stories.d.ts

@@ -0,0 +1,25 @@
+import { TemplateResult } from 'lit';
+import '../src/editors/ox-input-chart-timeseries.js';
+import '../src/chartjs/ox-chart-js.js';
+import '../src/scichart/ox-scichart.js';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        value: {
+            control: string;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    value: OperatoChart.ChartConfig;
+}
+export declare const Default: Story<ArgTypes>;
+export declare const WithData: Story<ArgTypes>;
+export declare const MultiAxis: Story<ArgTypes>;

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

@@ -0,0 +1,182 @@
+import { html } from 'lit';
+import '../src/editors/ox-input-chart-timeseries.js';
+import '../src/chartjs/ox-chart-js.js';
+import '../src/scichart/ox-scichart.js';
+import { data, getDefaultChartConfig } from './common.js';
+export default {
+    title: 'ox-input-chart-timeseries',
+    component: 'ox-input-chart-timeseries',
+    argTypes: {
+        value: { control: 'object' }
+    }
+};
+const Template = ({ value }) => html `
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
+
+  <style>
+    .container {
+      width: 100%;
+      height: 100%;
+
+      display: flex;
+      flex-direction: row;
+      overflow-y: auto;
+      padding: var(--spacing-medium);
+    }
+
+    .container.dark {
+      background-color: black;
+    }
+
+    #editor {
+      width: 300px;
+    }
+
+    #charts {
+      flex: 1;
+
+      display: flex;
+      flex-direction: column;
+      padding: 10px;
+    }
+
+    #chartjs {
+      flex: 1;
+    }
+
+    #scichart {
+      flex: 1;
+    }
+  </style>
+
+  <div style="background-color: black; color: white;">
+    Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey
+  </div>
+
+  <div class="container light">
+    <ox-input-chart-timeseries
+      chart-type="line"
+      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-timeseries>
+    <div id="charts">
+      <ox-scichart id="scichart" .data=${data} attr-x="year" attr-y="count"></ox-scichart>
+      <ox-chart-js id="chartjs" .data=${data}></ox-chart-js>
+    </div>
+  </div>
+`;
+export const Default = Template.bind({});
+Default.args = {};
+export const WithData = Template.bind({});
+WithData.args = {
+    value: {
+        ...getDefaultChartConfig('line'),
+        data: {
+            datasets: [
+                {
+                    dataKey: 'count',
+                    label: 'Line Series count',
+                    type: 'line',
+                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                    borderColor: 'rgba(255, 99, 132, 1)',
+                    borderWidth: 1
+                },
+                {
+                    dataKey: 'average',
+                    label: 'Line Series average',
+                    type: 'line',
+                    borderColor: 'rgba(54, 162, 235, 1)',
+                    borderWidth: 1,
+                    fill: false,
+                    lineTension: 0.4,
+                    pointStyle: 'circle',
+                    pointRadius: 3
+                }
+            ],
+            labelDataKey: 'year'
+        },
+        options: {
+            scales: {
+                xAxes: [{ ticks: { beginAtZero: true } }],
+                yAxes: [{ ticks: { beginAtZero: true } }]
+            },
+            legend: { display: true }
+        }
+    }
+};
+export const MultiAxis = Template.bind({});
+MultiAxis.args = {
+    value: {
+        ...getDefaultChartConfig('line'),
+        options: {
+            ...getDefaultChartConfig('line').options,
+            multiAxis: true
+        },
+        data: {
+            datasets: [
+                {
+                    label: 'Bar Series',
+                    type: 'bar',
+                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                    borderColor: 'rgba(255, 99, 132, 1)',
+                    borderWidth: 1,
+                    yAxisID: 'left'
+                },
+                {
+                    label: 'Line Series',
+                    type: 'line',
+                    borderColor: 'rgba(54, 162, 235, 1)',
+                    borderWidth: 1,
+                    fill: false,
+                    lineTension: 0.4,
+                    pointStyle: 'circle',
+                    pointRadius: 3,
+                    yAxisID: 'right'
+                }
+            ],
+            labelDataKey: 'labels'
+        }
+    }
+};
+//# sourceMappingURL=ox-input-chart-timeseries.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-chart-timeseries.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-timeseries.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport '../src/editors/ox-input-chart-timeseries.js'\nimport '../src/chartjs/ox-chart-js.js'\nimport '../src/scichart/ox-scichart.js'\n\nimport { data, getDefaultChartConfig } from './common.js'\n\nexport default {\n  title: 'ox-input-chart-timeseries',\n  component: 'ox-input-chart-timeseries',\n  argTypes: {\n    value: { control: 'object' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  value: OperatoChart.ChartConfig\n}\n\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-timeseries\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-timeseries>\n    <div id=\"charts\">\n      <ox-scichart id=\"scichart\" .data=${data} attr-x=\"year\" attr-y=\"count\"></ox-scichart>\n      <ox-chart-js id=\"chartjs\" .data=${data}></ox-chart-js>\n    </div>\n  </div>\n`\n\nexport const Default = Template.bind({})\nDefault.args = {}\n\nexport const WithData = Template.bind({})\nWithData.args = {\n  value: {\n    ...getDefaultChartConfig('line'),\n    data: {\n      datasets: [\n        {\n          dataKey: 'count',\n          label: 'Line Series count',\n          type: 'line',\n          backgroundColor: 'rgba(255, 99, 132, 0.2)',\n          borderColor: 'rgba(255, 99, 132, 1)',\n          borderWidth: 1\n        },\n        {\n          dataKey: 'average',\n          label: 'Line Series average',\n          type: 'line',\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: 'year'\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          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          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"]}