candlestick

packages/client/src/components/app/charts/AreaChart.svelte

@@ -99,8 +99,8 @@
     }
   }
 
-  const getSeries = (datasource, valueColumns = []) => {
-    const rows = datasource.rows ?? [];
+  const getSeries = (dataProvider, valueColumns = []) => {
+    const rows = dataProvider.rows ?? [];
 
     return valueColumns.map(column => ({
       name: column,
@@ -110,8 +110,8 @@
     }))
   }
 
-  const getCategories = (datasource, labelColumn) => {
-    const rows = datasource.rows ?? [];
+  const getCategories = (dataProvider, labelColumn) => {
+    const rows = dataProvider.rows ?? [];
 
     return rows.map(row => {
       const value = row?.[labelColumn]

packages/client/src/components/app/charts/BarChart.svelte

@@ -98,8 +98,8 @@
     }
   }
 
-  const getSeries = (datasource, valueColumns = []) => {
-    const rows = datasource.rows ?? [];
+  const getSeries = (dataProvider, valueColumns = []) => {
+    const rows = dataProvider.rows ?? [];
 
     return valueColumns.map(column => ({
       name: column,
@@ -109,8 +109,8 @@
     }))
   }
 
-  const getCategories = (datasource, labelColumn) => {
-    const rows = datasource.rows ?? [];
+  const getCategories = (dataProvider, labelColumn) => {
+    const rows = dataProvider.rows ?? [];
 
     return rows.map(row => {
       const value = row?.[labelColumn]

packages/client/src/components/app/charts/CandleStickChart.svelte

@@ -1,6 +1,7 @@
 <script>
   import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
   import ApexChart from "./ApexChart.svelte"
+  import formatters from './formatters';
 
   export let title
   export let dataProvider
@@ -14,82 +15,78 @@
   export let height
   export let width
   export let animate
-  export let yAxisUnits
+  export let valueUnits
 
-  $: options = setUpChart(
-    title,
+  $: series = getSeries(
     dataProvider,
     dateColumn,
     openColumn,
     highColumn,
     lowColumn,
-    closeColumn,
-    xAxisLabel,
-    yAxisLabel,
-    height,
-    width,
-    animate,
-    yAxisUnits
+    closeColumn
   )
 
-  const setUpChart = (
-    title,
+  $: options = {
+    series,
+    title: {
+      text: title,
+    },
+    chart: {
+      height: height == null || height === "" ? "auto" : height,
+      width: width == null || width === "" ? "100%" : width,
+      type: "candlestick",
+      animations: {
+        enabled: animate
+      },
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false,
+      },
+    },
+    xaxis: {
+      tooltip: {
+        formatter: formatters["Datetime"]
+      },
+      type: "datetime",
+      title: {
+        text: xAxisLabel
+      }
+    },
+    yaxis: {
+      title: {
+        text: yAxisLabel
+      }
+    }
+  }
+
+  const getSeries = (
     dataProvider,
     dateColumn,
     openColumn,
     highColumn,
     lowColumn,
-    closeColumn,
-    xAxisLabel,
-    yAxisLabel,
-    height,
-    width,
-    animate,
-    yAxisUnits
+    closeColumn
   ) => {
-    const allCols = [dateColumn, openColumn, highColumn, lowColumn, closeColumn]
-    if (
-      !dataProvider ||
-      !dataProvider.rows?.length ||
-      allCols.find(x => x == null)
-    ) {
-      return null
-    }
+    const rows = dataProvider.rows ?? [];
 
-    // Fetch data
-    const { schema, rows } = dataProvider
-    const reducer = row => (valid, column) => valid && row[column] != null
-    const hasAllColumns = row => allCols.reduce(reducer(row), true)
-    const data = rows.filter(row => hasAllColumns(row))
-    if (!schema || !data.length) {
-      return null
-    }
+    return [{
+      data: rows.map(row => {
+        const open = parseFloat(row[openColumn])
+        const high = parseFloat(row[highColumn])
+        const low = parseFloat(row[lowColumn])
+        const close = parseFloat(row[closeColumn])
 
-    // Initialise default chart
-    let builder = new ApexOptionsBuilder()
-      .type("candlestick")
-      .title(title)
-      .width(width)
-      .height(height)
-      .xLabel(xAxisLabel)
-      .yLabel(yAxisLabel)
-      .animate(animate)
-      .yUnits(yAxisUnits)
-      .yTooltip(true)
-      //.xType("datetime")
-      .candleStick()
-
-    // Add data
-    //const parseDate = d => d
-    const parseDate = d => (isNaN(d) ? Date.parse(d).valueOf() : parseInt(d))
-    const chartData = data.map(row => ([
-      parseDate(row[dateColumn]),
-      row[openColumn], row[highColumn], row[lowColumn], row[closeColumn]
-    ]))
-    builder = builder.series([{ data: chartData }])
-
-    // Build chart options
-    return builder.getOptions()
+        return [
+          Date.parse(row[dateColumn]),
+          isNaN(open) ? 0 : open,
+          isNaN(high) ? 0 : high,
+          isNaN(low) ? 0 : low,
+          isNaN(close) ? 0 : close,
+        ]
+      })
+    }]
   }
 </script>
 

packages/client/src/components/app/charts/DonutChart.svelte

@@ -56,8 +56,8 @@
     },
   }
 
-  const getSeries = (datasource, valueColumn) => {
-    const rows = datasource.rows ?? [];
+  const getSeries = (dataProvider, valueColumn) => {
+    const rows = dataProvider.rows ?? [];
 
     return rows.map(row => {
       const value = row?.[valueColumn]
@@ -70,8 +70,8 @@
     })
   }
 
-  const getLabels = (datasource, labelColumn, labelType) => {
-    const rows = datasource.rows ?? [];
+  const getLabels = (dataProvider, labelColumn, labelType) => {
+    const rows = dataProvider.rows ?? [];
 
     return rows.map(row => {
       const value = row?.[labelColumn]

packages/client/src/components/app/charts/LineChart.svelte

@@ -91,8 +91,8 @@
     }
   }
 
-  const getSeries = (datasource, valueColumns = []) => {
-    const rows = datasource.rows ?? [];
+  const getSeries = (dataProvider, valueColumns = []) => {
+    const rows = dataProvider.rows ?? [];
 
     return valueColumns.map(column => ({
       name: column,
@@ -102,8 +102,8 @@
     }))
   }
 
-  const getCategories = (datasource, labelColumn) => {
-    const rows = datasource.rows ?? [];
+  const getCategories = (dataProvider, labelColumn) => {
+    const rows = dataProvider.rows ?? [];
 
     return rows.map(row => {
       const value = row?.[labelColumn]

packages/client/src/components/app/charts/PieChart.svelte

@@ -56,8 +56,8 @@
     },
   }
 
-  const getSeries = (datasource, valueColumn) => {
-    const rows = datasource.rows ?? [];
+  const getSeries = (dataProvider, valueColumn) => {
+    const rows = dataProvider.rows ?? [];
 
     return rows.map(row => {
       const value = row?.[valueColumn]
@@ -70,8 +70,8 @@
     })
   }
 
-  const getLabels = (datasource, labelColumn, labelType) => {
-    const rows = datasource.rows ?? [];
+  const getLabels = (dataProvider, labelColumn, labelType) => {
+    const rows = dataProvider.rows ?? [];
 
     return rows.map(row => {
       const value = row?.[labelColumn]