@operato/chart 2.0.0-beta.25

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

@@ -0,0 +1,194 @@
+import { html, TemplateResult } from 'lit'
+
+import '../src/editors/ox-input-chart-mixed.js'
+import '../src/chartjs/ox-chart-js.js'
+import '../src/scichart/ox-scichart.js'
+import { convertConfigure } from '../src/chartjs/config-converter.js'
+
+import { getDefaultChartConfig } from './common.js'
+
+export default {
+  title: 'ox-input-chart-mixed',
+  component: 'ox-input-chart-mixed',
+  argTypes: {
+    value: { control: 'object' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  value: OperatoChart.ChartConfig
+}
+
+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"
+    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 class="container light">
+    <ox-input-chart-mixed
+      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 = convertConfigure(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')
+          }
+        }
+      }}
+    ></ox-input-chart-mixed>
+    <div id="charts">
+      <ox-chart-js id="chartjs"></ox-chart-js>
+      <ox-scichart id="scichart"></ox-scichart>
+    </div>
+  </div>
+`
+
+export const Default = Template.bind({})
+Default.args = {}
+
+export const WithData = Template.bind({})
+WithData.args = {
+  value: {
+    ...getDefaultChartConfig('mixed'),
+    data: {
+      datasets: [
+        {
+          label: 'Bar Series',
+          type: 'bar',
+          data: [10, 20, 30],
+          backgroundColor: 'rgba(255, 99, 132, 0.2)',
+          borderColor: 'rgba(255, 99, 132, 1)',
+          borderWidth: 1
+        },
+        {
+          label: 'Line Series',
+          type: 'line',
+          data: [15, 25, 35],
+          borderColor: 'rgba(54, 162, 235, 1)',
+          borderWidth: 1,
+          fill: false,
+          lineTension: 0.4,
+          pointStyle: 'circle',
+          pointRadius: 3
+        }
+      ],
+      labelDataKey: 'labels'
+    },
+    options: {
+      scales: {
+        xAxes: [{ ticks: { beginAtZero: true } }],
+        yAxes: [{ ticks: { beginAtZero: true } }]
+      },
+      legend: { display: true }
+    }
+  }
+}
+
+export const MultiAxis = Template.bind({})
+MultiAxis.args = {
+  value: {
+    ...getDefaultChartConfig('mixed'),
+    options: {
+      ...getDefaultChartConfig('mixed').options,
+      multiAxis: true
+    },
+    data: {
+      datasets: [
+        {
+          label: 'Bar Series',
+          type: 'bar',
+          data: [10, 20, 30],
+          backgroundColor: 'rgba(255, 99, 132, 0.2)',
+          borderColor: 'rgba(255, 99, 132, 1)',
+          borderWidth: 1,
+          yAxisID: 'left'
+        },
+        {
+          label: 'Line Series',
+          type: 'line',
+          data: [15, 25, 35],
+          borderColor: 'rgba(54, 162, 235, 1)',
+          borderWidth: 1,
+          fill: false,
+          lineTension: 0.4,
+          pointStyle: 'circle',
+          pointRadius: 3,
+          yAxisID: 'right'
+        }
+      ],
+      labelDataKey: 'labels'
+    }
+  }
+}

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

@@ -0,0 +1,126 @@
+import { html, TemplateResult } from 'lit'
+
+import '../src/editors/ox-input-chart-pie.js'
+import '../src/chartjs/ox-chart-js.js'
+import { convertConfigure } from '../src/chartjs/config-converter.js'
+
+import { getDefaultChartConfig } from './common.js'
+
+export default {
+  title: 'ox-input-chart-pie',
+  component: 'ox-input-chart-pie',
+  argTypes: {
+    value: { control: 'object' },
+    currentSeriesIndex: { control: 'number' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  value: OperatoChart.ChartConfig
+  currentSeriesIndex: number
+}
+
+const Template: Story<ArgTypes> = ({ value, currentSeriesIndex }: ArgTypes) => 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;
+    }
+
+    #chart {
+      flex: 1;
+    }
+  </style>
+
+  <div class="container light">
+    <ox-input-chart-pie
+      id="editor"
+      .value=${value}
+      @change=${(e: CustomEvent) => {
+        const target = e.currentTarget as any
+        const config = target.value
+        const chart = document.querySelector('#chart') as HTMLElement
+        if (chart) {
+          ;(chart as any).config = convertConfigure(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')
+          }
+        }
+      }}
+    ></ox-input-chart-pie>
+    <ox-chart-js id="chart"></ox-chart-js>
+  </div>
+`
+
+export const Default = Template.bind({})
+Default.args = {
+  currentSeriesIndex: 0
+}
+
+export const WithData = Template.bind({})
+WithData.args = {
+  value: {
+    ...getDefaultChartConfig('pie'),
+    data: {
+      datasets: [
+        {
+          label: 'Pie Series 1',
+          data: [10, 20, 30],
+          backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(75, 192, 192, 0.2)'],
+          borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(75, 192, 192, 1)'],
+          borderWidth: 1
+        }
+      ],
+      labelDataKey: 'labels'
+    },
+    options: {
+      legend: { display: true }
+    }
+  },
+  currentSeriesIndex: 0
+}

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

@@ -0,0 +1,137 @@
+import { html, TemplateResult } from 'lit'
+
+import '../src/editors/ox-input-chart-radar.js'
+import '../src/chartjs/ox-chart-js.js'
+import { convertConfigure } from '../src/chartjs/config-converter.js'
+
+import { getDefaultChartConfig } from './common.js'
+
+export default {
+  title: 'ox-input-chart-radar',
+  component: 'ox-input-chart-radar',
+  argTypes: {
+    value: { control: 'object' },
+    currentSeriesIndex: { control: 'number' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  value: OperatoChart.ChartConfig
+  currentSeriesIndex: number
+}
+
+const Template: Story<ArgTypes> = ({ value, currentSeriesIndex }: ArgTypes) => 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;
+    }
+
+    #chart {
+      flex: 1;
+    }
+  </style>
+
+  <div class="container light">
+    <ox-input-chart-radar
+      id="editor"
+      .value=${value}
+      @change=${(e: CustomEvent) => {
+        const target = e.currentTarget as any
+        const config = target.value
+        const chart = document.querySelector('#chart') as HTMLElement
+        if (chart) {
+          ;(chart as any).config = convertConfigure(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')
+          }
+        }
+      }}
+    ></ox-input-chart-radar>
+    <ox-chart-js id="chart"></ox-chart-js>
+  </div>
+`
+
+export const Default = Template.bind({})
+Default.args = {
+  currentSeriesIndex: 0
+}
+
+export const WithData = Template.bind({})
+WithData.args = {
+  value: {
+    ...getDefaultChartConfig('radar'),
+    data: {
+      datasets: [
+        {
+          label: 'Radar Series 1',
+          data: [10, 20, 30],
+          backgroundColor: 'rgba(255, 99, 132, 0.2)',
+          borderColor: 'rgba(255, 99, 132, 1)',
+          borderWidth: 1,
+          pointStyle: 'circle',
+          pointRadius: 3
+        },
+        {
+          label: 'Radar Series 2',
+          data: [15, 25, 35],
+          backgroundColor: 'rgba(54, 162, 235, 0.2)',
+          borderColor: 'rgba(54, 162, 235, 1)',
+          borderWidth: 1,
+          pointStyle: 'circle',
+          pointRadius: 3
+        }
+      ],
+      labelDataKey: 'labels'
+    },
+    options: {
+      legend: { display: true }
+    }
+  },
+  currentSeriesIndex: 0
+}

package/themes/dark-hc.css

@@ -0,0 +1,151 @@
+.dark-high-contrast {
+  --md-sys-color-primary: rgb(252 250 255);
+  --md-sys-color-surface-tint: rgb(178 197 255);
+  --md-sys-color-on-primary: rgb(0 0 0);
+  --md-sys-color-primary-container: rgb(184 201 255);
+  --md-sys-color-on-primary-container: rgb(0 0 0);
+  --md-sys-color-secondary: rgb(248 251 255);
+  --md-sys-color-on-secondary: rgb(0 0 0);
+  --md-sys-color-secondary-container: rgb(147 211 247);
+  --md-sys-color-on-secondary-container: rgb(0 0 0);
+  --md-sys-color-tertiary: rgb(238 255 242);
+  --md-sys-color-on-tertiary: rgb(0 0 0);
+  --md-sys-color-tertiary-container: rgb(148 218 179);
+  --md-sys-color-on-tertiary-container: rgb(0 0 0);
+  --md-sys-color-error: rgb(255 249 249);
+  --md-sys-color-on-error: rgb(0 0 0);
+  --md-sys-color-error-container: rgb(255 185 180);
+  --md-sys-color-on-error-container: rgb(0 0 0);
+  --md-sys-color-background: rgb(18 19 24);
+  --md-sys-color-on-background: rgb(227 226 233);
+  --md-sys-color-surface: rgb(18 19 24);
+  --md-sys-color-on-surface: rgb(255 255 255);
+  --md-sys-color-surface-variant: rgb(69 70 79);
+  --md-sys-color-on-surface-variant: rgb(252 250 255);
+  --md-sys-color-outline: rgb(201 202 212);
+  --md-sys-color-outline-variant: rgb(201 202 212);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(227 226 233);
+  --md-sys-color-inverse-on-surface: rgb(0 0 0);
+  --md-sys-color-inverse-primary: rgb(16 39 90);
+  --md-sys-color-primary-fixed: rgb(224 230 255);
+  --md-sys-color-on-primary-fixed: rgb(0 0 0);
+  --md-sys-color-primary-fixed-dim: rgb(184 201 255);
+  --md-sys-color-on-primary-fixed-variant: rgb(0 19 61);
+  --md-sys-color-secondary-fixed: rgb(205 235 255);
+  --md-sys-color-on-secondary-fixed: rgb(0 0 0);
+  --md-sys-color-secondary-fixed-dim: rgb(147 211 247);
+  --md-sys-color-on-secondary-fixed-variant: rgb(0 25 36);
+  --md-sys-color-tertiary-fixed: rgb(175 246 206);
+  --md-sys-color-on-tertiary-fixed: rgb(0 0 0);
+  --md-sys-color-tertiary-fixed-dim: rgb(148 218 179);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(0 27 14);
+  --md-sys-color-surface-dim: rgb(18 19 24);
+  --md-sys-color-surface-bright: rgb(56 57 63);
+  --md-sys-color-surface-container-lowest: rgb(13 14 19);
+  --md-sys-color-surface-container-low: rgb(26 27 33);
+  --md-sys-color-surface-container: rgb(30 31 37);
+  --md-sys-color-surface-container-high: rgb(41 42 47);
+  --md-sys-color-surface-container-highest: rgb(51 52 58);
+
+  /* primary palette */
+  --md-ref-palette-primary0:#000000;
+  --md-ref-palette-primary5:#000E32;
+  --md-ref-palette-primary10:#001848;
+  --md-ref-palette-primary15:#00215E;
+  --md-ref-palette-primary20:#002B74;
+  --md-ref-palette-primary25:#002B74;
+  --md-ref-palette-primary30:#0040A2;
+  --md-ref-palette-primary35:#002B74;
+  --md-ref-palette-primary40:#1957CA;
+  --md-ref-palette-primary50:#3E71E5;
+  --md-ref-palette-primary60:#5C8BFF;
+  --md-ref-palette-primary70:#89A9FF;
+  --md-ref-palette-primary80:#B2C5FF;
+  --md-ref-palette-primary90:#DAE2FF;
+  --md-ref-palette-primary95:#EEF0FF;
+  --md-ref-palette-primary98:#FAF8FF;
+  --md-ref-palette-primary99:#FEFBFF;
+  --md-ref-palette-primary100:#FFFFFF;
+
+  /* secondary palette */
+  --md-ref-palette-secondary0:#000000;
+  --md-ref-palette-secondary5:#00131D;
+  --md-ref-palette-secondary10:#001E2C;
+  --md-ref-palette-secondary15:#00293A;
+  --md-ref-palette-secondary20:#003549;
+  --md-ref-palette-secondary25:#004058;
+  --md-ref-palette-secondary30:#004C68;
+  --md-ref-palette-secondary35:#005978;
+  --md-ref-palette-secondary40:#006689;
+  --md-ref-palette-secondary50:#0080AC;
+  --md-ref-palette-secondary60:#009BCF;
+  --md-ref-palette-secondary70:#00B8F4;
+  --md-ref-palette-secondary80:#79D1FF;
+  --md-ref-palette-secondary90:#C3E8FF;
+  --md-ref-palette-secondary95:#E3F3FF;
+  --md-ref-palette-secondary98:#F5FAFF;
+  --md-ref-palette-secondary99:#FBFCFF;
+  --md-ref-palette-secondary100:#FFFFFF;
+
+  /* tertiary palette */
+  --md-ref-palette-tertiary0:#000000;
+  --md-ref-palette-tertiary5:#00150A;
+  --md-ref-palette-tertiary10:#002113;
+  --md-ref-palette-tertiary15:#002C1B;
+  --md-ref-palette-tertiary20:#003823;
+  --md-ref-palette-tertiary25:#00452B;
+  --md-ref-palette-tertiary30:#005234;
+  --md-ref-palette-tertiary35:#005F3E;
+  --md-ref-palette-tertiary40:#006C47;
+  --md-ref-palette-tertiary50:#00885A;
+  --md-ref-palette-tertiary60:#31A372;
+  --md-ref-palette-tertiary70:#51BF8B;
+  --md-ref-palette-tertiary80:#6EDBA5;
+  --md-ref-palette-tertiary90:#A2F4C7;
+  --md-ref-palette-tertiary95:#BFFFD9;
+  --md-ref-palette-tertiary98:#E8FFEF;
+  --md-ref-palette-tertiary99:#F4FFF5;
+  --md-ref-palette-tertiary100:#FFFFFF;
+
+  /* error palette */
+  --md-ref-palette-error0:#000000;
+  --md-ref-palette-error5:#2d0102;
+  --md-ref-palette-error10:#410304;
+  --md-ref-palette-error15:#540507;
+  --md-ref-palette-error20:#68070a;
+  --md-ref-palette-error25:#7d0b0e;
+  --md-ref-palette-error30:#930f14;
+  --md-ref-palette-error35:#a91319;
+  --md-ref-palette-error40:#bc1620;
+  --md-ref-palette-error50:#e03236;
+  --md-ref-palette-error60:#ff5450;
+  --md-ref-palette-error70:#ff8982;
+  --md-ref-palette-error80:#ffb3ad;
+  --md-ref-palette-error90:#ffdad7;
+  --md-ref-palette-error95:#ffedeb;
+  --md-ref-palette-error98:#fff8f7;
+  --md-ref-palette-error99:#fffbff;
+  --md-ref-palette-error100:#FFFFFF;
+
+  /* neutral palette */
+  --md-ref-palette-neutral0:#000000;
+  --md-ref-palette-neutral5:#111111;
+  --md-ref-palette-neutral10:#1C1C1C;
+  --md-ref-palette-neutral15:#262626;
+  --md-ref-palette-neutral20:#313131;
+  --md-ref-palette-neutral25:#3C3C3C;
+  --md-ref-palette-neutral30:#474747;
+  --md-ref-palette-neutral35:#535353;
+  --md-ref-palette-neutral40:#5F5F5F;
+  --md-ref-palette-neutral50:#787878;
+  --md-ref-palette-neutral60:#929292;
+  --md-ref-palette-neutral70:#ACACAC;
+  --md-ref-palette-neutral80:#C8C8C8;
+  --md-ref-palette-neutral90:#E4E4E4;
+  --md-ref-palette-neutral95:#F0F0F0;
+  --md-ref-palette-neutral98:#F9F9F9;
+  --md-ref-palette-neutral99:#FEFEFE;
+  --md-ref-palette-neutral100:#FFFFFF;
+}