@operato/chart 7.0.0 → 7.0.2

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

@@ -24,6 +24,19 @@ interface ArgTypes {
   value: OperatoChart.ChartConfig
 }
 
+function showCharts(e: Event) {
+  const target = e.currentTarget as any
+  const config = target.value
+  const chartjs = document.querySelector('#chartjs') as HTMLElement
+  if (chartjs) {
+    ;(chartjs as any).config = { ...config }
+  }
+  const scichart = document.querySelector('#scichart') as HTMLElement
+  if (scichart) {
+    ;(scichart as any).config = config
+  }
+}
+
 const Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`
   <link
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
@@ -43,18 +56,21 @@ const Template: Story<ArgTypes> = ({ value }: ArgTypes) => 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 {
@@ -66,7 +82,7 @@ const Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`
 
       display: flex;
       flex-direction: column;
-      padding: 10px;
+      gap: var(--spacing-medium);
     }
 
     #chartjs {
@@ -78,43 +94,18 @@ const Template: Story<ArgTypes> = ({ value }: ArgTypes) => 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">
+  <div class="container">
     <ox-input-chart-timeseries
       chart-type="line"
       id="editor"
       .value=${value}
-      @change=${(e: CustomEvent) => {
-        const target = e.currentTarget as any
-        const config = target.value
-        const chartjs = document.querySelector('#chartjs') as HTMLElement
-        if (chartjs) {
-          ;(chartjs as any).config = { ...config }
-        }
-        const scichart = document.querySelector('#scichart') as HTMLElement
-        if (scichart) {
-          ;(scichart as any).config = config
-        }
-
-        const container = document.querySelector('.container') as HTMLElement
-        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')
-          }
-        }
-      }}
+      @change=${showCharts}
     ></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>
+      <ox-scichart id="scichart" .data=${data} attr-x="timestamp" attr-y="count"></ox-scichart>
+      <!-- <ox-chart-js id="chartjs" .data=${data}></ox-chart-js> -->
     </div>
   </div>
 `
@@ -132,28 +123,40 @@ WithData.args = {
           dataKey: 'count',
           label: 'Line Series count',
           type: 'line',
-          backgroundColor: 'rgba(255, 99, 132, 0.2)',
-          borderColor: 'rgba(255, 99, 132, 1)',
+          color: 'rgba(255, 99, 132, 1)',
           borderWidth: 1
         },
         {
           dataKey: 'average',
           label: 'Line Series average',
           type: 'line',
-          borderColor: 'rgba(54, 162, 235, 1)',
-          borderWidth: 1,
+          color: 'rgba(54, 162, 235, 1)',
           fill: false,
           lineTension: 0.4,
           pointStyle: 'circle',
           pointRadius: 3
         }
       ],
-      labelDataKey: 'year'
+      labelDataKey: 'timestamp'
     },
     options: {
       scales: {
-        xAxes: [{ ticks: { beginAtZero: true } }],
-        yAxes: [{ ticks: { beginAtZero: true } }]
+        xAxes: [
+          {
+            axisTitle: 'timestamp',
+            ticks: { beginAtZero: true }
+          }
+        ],
+        yAxes: [
+          {
+            axisTitle: 'count',
+            ticks: { beginAtZero: true }
+          },
+          {
+            axisTitle: 'average',
+            ticks: { beginAtZero: true }
+          }
+        ]
       },
       legend: { display: true }
     }
@@ -164,15 +167,13 @@ export const MultiAxis = Template.bind({})
 MultiAxis.args = {
   value: {
     ...getDefaultChartConfig('line'),
-    options: {
-      ...getDefaultChartConfig('line').options,
-      multiAxis: true
-    },
     data: {
       datasets: [
         {
           label: 'Bar Series',
           type: 'bar',
+          dataKey: 'count',
+          axisTitle: 'count',
           backgroundColor: 'rgba(255, 99, 132, 0.2)',
           borderColor: 'rgba(255, 99, 132, 1)',
           borderWidth: 1,
@@ -181,16 +182,40 @@ MultiAxis.args = {
         {
           label: 'Line Series',
           type: 'line',
-          borderColor: 'rgba(54, 162, 235, 1)',
+          dataKey: 'average',
+          axisTitle: 'average',
+          color: 'rgba(54, 162, 235, 1)',
           borderWidth: 1,
           fill: false,
           lineTension: 0.4,
-          pointStyle: 'circle',
+          pointStyle: 'rect',
           pointRadius: 3,
           yAxisID: 'right'
         }
       ],
-      labelDataKey: 'labels'
+      labelDataKey: 'timestamp'
+    },
+    options: {
+      scales: {
+        xAxes: [
+          {
+            axisTitle: 'timestamp',
+            ticks: { beginAtZero: true }
+          }
+        ],
+        yAxes: [
+          {
+            axisTitle: 'count',
+            ticks: { beginAtZero: true }
+          },
+          {
+            axisTitle: 'average',
+            ticks: { beginAtZero: true }
+          }
+        ]
+      },
+      multiAxis: true,
+      legend: { display: true }
     }
   }
 }