From f997710c48ddad30a51304011e35dd3f624f5f3f Mon Sep 17 00:00:00 2001 From: Xharles Date: Thu, 4 Jan 2024 16:49:15 +0100 Subject: [PATCH 1/4] set up --- packages/ui-kit/src/App.tsx | 247 +++++++++++++++++-- packages/ui-kit/src/globalStyles/charts.scss | 26 ++ 2 files changed, 259 insertions(+), 14 deletions(-) diff --git a/packages/ui-kit/src/App.tsx b/packages/ui-kit/src/App.tsx index 9be70bcd..5864c046 100644 --- a/packages/ui-kit/src/App.tsx +++ b/packages/ui-kit/src/App.tsx @@ -1,28 +1,247 @@ import { IonDatetime, setupIonicReact } from "@ionic/react"; -import { Arrow } from "./components/arrow/Arrow"; -import { Button } from "./components/buttons/Button"; -import { IconButton } from "./components/buttons/IconButton"; +import moment from "moment"; +import { flushSync } from "react-dom"; +import { createRoot } from "react-dom/client"; +import { ApexBarChart } from "./components/charts/apexchart"; +import { themeColors } from "./globalStyles/themes"; setupIonicReact(); +type TApexChartWindow = { + globals: { + seriesNames: string[]; + }; +}; + +const renderToString = (node: JSX.Element): string => { + const wrapper = document.createElement("div"); + const root = createRoot(wrapper); + flushSync(() => root.render(node)); + return wrapper.innerHTML; +}; + +const data = [ + [(1703739600 + 1 * 86400) * 1000, 2], + [(1703739600 + 2 * 86400) * 1000, 16], + [(1703739600 + 3 * 86400) * 1000, 5], + [(1703739600 + 4 * 86400) * 1000, 18], + [(1703739600 + 5 * 86400) * 1000, 14], + [(1703739600 + 6 * 86400) * 1000, 14], + [(1703739600 + 7 * 86400) * 1000, 20], + [(1703739600 + 8 * 86400) * 1000, 16], + [(1703739600 + 9 * 86400) * 1000, 9], + [(1703739600 + 10 * 86400) * 1000, 11], + [(1703739600 + 11 * 86400) * 1000, 19], + [(1703739600 + 12 * 86400) * 1000, 14], + [(1703739600 + 13 * 86400) * 1000, 8], + [(1703739600 + 14 * 86400) * 1000, 12], + [(1703739600 + 15 * 86400) * 1000, 20], + [(1703739600 + 16 * 86400) * 1000, 14], + [(1703739600 + 17 * 86400) * 1000, 7], + [(1703739600 + 18 * 86400) * 1000, 6], + [(1703739600 + 19 * 86400) * 1000, 21], + [(1703739600 + 20 * 86400) * 1000, 5], +]; + +const options = { + chart: { + type: "area", + stacked: true, + zoom: { + enabled: true, + type: "x", + autoScaleYaxis: false, + zoomedArea: { + fill: { + color: themeColors.btnRingVariant400, + opacity: 0.4, + }, + stroke: { + color: themeColors.btnRingVariant200, + opacity: 0.4, + width: 1, + }, + }, + }, + toolbar: { + show: false, + }, + redrawOnParentResize: true, + }, + colors: ["rgba(109, 210, 48, 0.5)", "rgba(109, 210, 48, 0.5)"], + dataLabels: { + enabled: false, + }, + stroke: { + curve: "smooth", + width: 1.5, + }, + fill: { + type: "gradient", + gradient: { + type: "vertical", + gradientToColors: [themeColors.success, themeColors.success], + shadeIntensity: 1, + opacityFrom: 0.85, + opacityTo: 0.85, + stops: [0, 100], + }, + }, + legend: { + show: false, + }, + xaxis: { + type: "datetime", + tooltip: { + enabled: false, + }, + axisTicks: { + show: false, + }, + tickPlacement: "between", + tickAmount: 7, + labels: { + datetimeUTC: false, + formatter(_val: string, timestamp: number) { + return moment(timestamp).format("DD/MM/YY"); + }, + style: { + colors: themeColors.btnRingVariant500, + fontSize: "10px", + fontFamily: "Arial, sans-serif", + fontWeight: 700, + cssClass: "apexcharts-xaxis-label", + }, + }, + }, + yaxis: { + show: false, + tickAmount: 3, + min: 0, + max: (max: number) => { + return max * 1.001; + }, + decimalsInFloat: false, + }, + grid: { + borderColor: themeColors.btnRingVariant500, + strokeDashArray: 5, + xaxis: { + lines: { + show: true, + }, + }, + yaxis: { + lines: { + show: false, + }, + }, + column: { + colors: themeColors.btnRingVariant500, + opacity: 1, + }, + }, + tooltip: { + fillSeriesColor: themeColors.white, + title: { + formatter: (seriesName: string) => `$${seriesName}`, + }, + y: { + formatter: undefined, + title: { + formatter: (val: string) => { + return renderToString( + ${val}: + ); + }, + }, + }, + custom: ({ + series, + seriesIndex, + dataPointIndex, + w, + }: { + series: number[][]; + seriesIndex: number; + dataPointIndex: number; + w: TApexChartWindow; + }) => { + // .price-tooltip { + // padding: 0.6em 0.8em; + // display: flex; + // flex-direction: column; + // word-wrap: break-word; + // @apply bg-primaryVariant200 fontGroup-support text-primary; + + // .price { + // @apply fontGroup-supportBold; + + // span { + // @apply fontGroup-support; + // } + // } + // .date { + // padding-top: 1px; + // } + // } + return renderToString( +
+ + {w.globals.seriesNames[0]}: {} + {new Intl.NumberFormat("en-US", { + style: "currency", + currency: "USD", + maximumFractionDigits: 2, + }).format(series[seriesIndex][dataPointIndex])} + + + {moment(data[dataPointIndex][0]).format( + "YYYY-MM-DD HH:mm" + )} + +
+ ); + }, + }, + responsive: [ + { + breakpoint: 575, + options: { + chart: { + height: 200, + }, + xaxis: { + show: false, + }, + }, + }, + ], +}; + +const chartSeries = [ + { + name: "Price", + data, + }, +]; + function App() { return (

Vite + React + Ionic + Tailwind

- -
- -
-

- Tyring out Prose -

+ {/* */} +
+
+
- - - -
); diff --git a/packages/ui-kit/src/globalStyles/charts.scss b/packages/ui-kit/src/globalStyles/charts.scss index b2f2db27..a5abd293 100644 --- a/packages/ui-kit/src/globalStyles/charts.scss +++ b/packages/ui-kit/src/globalStyles/charts.scss @@ -192,3 +192,29 @@ } } } + +.custom-charts-widget { +.barchart-styles { + position: relative; + svg { + position: absolute; + left: -5px; + transform: translate(0px, 0px) scale(1.04); + } + + .apexcharts-xcrosshairs.apexcharts-active { + opacity: 0; + } + + .apexcharts-xaxis-texts-g { + transform: translate(0px, -5px) scale(1.0); + tspan { + fill: theme("colors.primaryVariant200"); + } + } + + .apexcharts-inner.apexcharts-graphical { + // transform: translate(0px, 0px) scale(1.05); + } +} +} \ No newline at end of file From 51409c315fab46286b5b2f5aadee67516848b894 Mon Sep 17 00:00:00 2001 From: Xharles Date: Thu, 4 Jan 2024 16:55:49 +0100 Subject: [PATCH 2/4] finish up --- packages/ui-kit/src/App.tsx | 43 +++++++++----------- packages/ui-kit/src/globalStyles/charts.scss | 28 ++++++++++++- 2 files changed, 47 insertions(+), 24 deletions(-) diff --git a/packages/ui-kit/src/App.tsx b/packages/ui-kit/src/App.tsx index 5864c046..6b806ca0 100644 --- a/packages/ui-kit/src/App.tsx +++ b/packages/ui-kit/src/App.tsx @@ -1,4 +1,7 @@ -import { IonDatetime, setupIonicReact } from "@ionic/react"; +import { + // IonDatetime, + setupIonicReact, +} from "@ionic/react"; import moment from "moment"; import { flushSync } from "react-dom"; import { createRoot } from "react-dom/client"; @@ -21,26 +24,20 @@ const renderToString = (node: JSX.Element): string => { }; const data = [ - [(1703739600 + 1 * 86400) * 1000, 2], - [(1703739600 + 2 * 86400) * 1000, 16], - [(1703739600 + 3 * 86400) * 1000, 5], - [(1703739600 + 4 * 86400) * 1000, 18], - [(1703739600 + 5 * 86400) * 1000, 14], - [(1703739600 + 6 * 86400) * 1000, 14], - [(1703739600 + 7 * 86400) * 1000, 20], - [(1703739600 + 8 * 86400) * 1000, 16], - [(1703739600 + 9 * 86400) * 1000, 9], - [(1703739600 + 10 * 86400) * 1000, 11], - [(1703739600 + 11 * 86400) * 1000, 19], - [(1703739600 + 12 * 86400) * 1000, 14], - [(1703739600 + 13 * 86400) * 1000, 8], - [(1703739600 + 14 * 86400) * 1000, 12], - [(1703739600 + 15 * 86400) * 1000, 20], - [(1703739600 + 16 * 86400) * 1000, 14], - [(1703739600 + 17 * 86400) * 1000, 7], - [(1703739600 + 18 * 86400) * 1000, 6], - [(1703739600 + 19 * 86400) * 1000, 21], - [(1703739600 + 20 * 86400) * 1000, 5], + ["01-Feb-2024 GMT+1", 14], + ["02-Feb-2024 GMT+1", 14], + ["03-Feb-2024 GMT+1", 20], + ["04-Feb-2024 GMT+1", 16], + ["05-Feb-2024 GMT+1", 11], + ["06-Feb-2024 GMT+1", 19], + ["07-Feb-2024 GMT+1", 14], + ["08-Feb-2024 GMT+1", 8], + ["09-Feb-2024 GMT+1", 12], + ["10-Feb-2024 GMT+1", 20], + ["11-Feb-2024 GMT+1", 14], + ["12-Feb-2024 GMT+1", 7], + ["13-Feb-2024 GMT+1", 6], + ["14-Feb-2024 GMT+1", 21], ]; const options = { @@ -99,11 +96,11 @@ const options = { show: false, }, tickPlacement: "between", - tickAmount: 7, + tickAmount: Math.min(data.length, 8) - 1, labels: { datetimeUTC: false, formatter(_val: string, timestamp: number) { - return moment(timestamp).format("DD/MM/YY"); + return moment(timestamp).format("DD-MM-YYYY"); }, style: { colors: themeColors.btnRingVariant500, diff --git a/packages/ui-kit/src/globalStyles/charts.scss b/packages/ui-kit/src/globalStyles/charts.scss index a5abd293..785510ba 100644 --- a/packages/ui-kit/src/globalStyles/charts.scss +++ b/packages/ui-kit/src/globalStyles/charts.scss @@ -214,7 +214,33 @@ } .apexcharts-inner.apexcharts-graphical { - // transform: translate(0px, 0px) scale(1.05); + & > line { + stroke: theme("colors.btnRingVariant500"); + } + + .apexcharts-gridlines-vertical { + line { + stroke: theme("colors.btnRingVariant500"); + + // hide last grid line in chart because the datalabel is hidden by apexcarts + &:nth-last-of-type(1){ + display: none; + } + } + + } + + // .apexcharts-xaxis-texts-g { + // incase it's needed in the final chart + // shift x-axis labels to the right so that the label is not hidden by the chart + // transform: translate(10px, 0px); + // } + } + + .apexcharts-grid-borders{ + line { + stroke: theme("colors.btnRingVariant500"); + } } } } \ No newline at end of file From a406eaad28671c1ce9ba570e69fc41ddc47d5913 Mon Sep 17 00:00:00 2001 From: Xharles Date: Thu, 4 Jan 2024 17:35:45 +0100 Subject: [PATCH 3/4] move sample set up to mock --- packages/ui-kit/src/App.tsx | 225 +----------------- .../ui-kit/src/components/charts/mockData.tsx | 201 ++++++++++++++++ 2 files changed, 207 insertions(+), 219 deletions(-) create mode 100644 packages/ui-kit/src/components/charts/mockData.tsx diff --git a/packages/ui-kit/src/App.tsx b/packages/ui-kit/src/App.tsx index 6b806ca0..98f5fb08 100644 --- a/packages/ui-kit/src/App.tsx +++ b/packages/ui-kit/src/App.tsx @@ -2,227 +2,14 @@ import { // IonDatetime, setupIonicReact, } from "@ionic/react"; -import moment from "moment"; -import { flushSync } from "react-dom"; -import { createRoot } from "react-dom/client"; import { ApexBarChart } from "./components/charts/apexchart"; -import { themeColors } from "./globalStyles/themes"; +import { + BarChartSampleOptions, + BarChartSampleSeries, +} from "./components/charts/mockData"; setupIonicReact(); -type TApexChartWindow = { - globals: { - seriesNames: string[]; - }; -}; - -const renderToString = (node: JSX.Element): string => { - const wrapper = document.createElement("div"); - const root = createRoot(wrapper); - flushSync(() => root.render(node)); - return wrapper.innerHTML; -}; - -const data = [ - ["01-Feb-2024 GMT+1", 14], - ["02-Feb-2024 GMT+1", 14], - ["03-Feb-2024 GMT+1", 20], - ["04-Feb-2024 GMT+1", 16], - ["05-Feb-2024 GMT+1", 11], - ["06-Feb-2024 GMT+1", 19], - ["07-Feb-2024 GMT+1", 14], - ["08-Feb-2024 GMT+1", 8], - ["09-Feb-2024 GMT+1", 12], - ["10-Feb-2024 GMT+1", 20], - ["11-Feb-2024 GMT+1", 14], - ["12-Feb-2024 GMT+1", 7], - ["13-Feb-2024 GMT+1", 6], - ["14-Feb-2024 GMT+1", 21], -]; - -const options = { - chart: { - type: "area", - stacked: true, - zoom: { - enabled: true, - type: "x", - autoScaleYaxis: false, - zoomedArea: { - fill: { - color: themeColors.btnRingVariant400, - opacity: 0.4, - }, - stroke: { - color: themeColors.btnRingVariant200, - opacity: 0.4, - width: 1, - }, - }, - }, - toolbar: { - show: false, - }, - redrawOnParentResize: true, - }, - colors: ["rgba(109, 210, 48, 0.5)", "rgba(109, 210, 48, 0.5)"], - dataLabels: { - enabled: false, - }, - stroke: { - curve: "smooth", - width: 1.5, - }, - fill: { - type: "gradient", - gradient: { - type: "vertical", - gradientToColors: [themeColors.success, themeColors.success], - shadeIntensity: 1, - opacityFrom: 0.85, - opacityTo: 0.85, - stops: [0, 100], - }, - }, - legend: { - show: false, - }, - xaxis: { - type: "datetime", - tooltip: { - enabled: false, - }, - axisTicks: { - show: false, - }, - tickPlacement: "between", - tickAmount: Math.min(data.length, 8) - 1, - labels: { - datetimeUTC: false, - formatter(_val: string, timestamp: number) { - return moment(timestamp).format("DD-MM-YYYY"); - }, - style: { - colors: themeColors.btnRingVariant500, - fontSize: "10px", - fontFamily: "Arial, sans-serif", - fontWeight: 700, - cssClass: "apexcharts-xaxis-label", - }, - }, - }, - yaxis: { - show: false, - tickAmount: 3, - min: 0, - max: (max: number) => { - return max * 1.001; - }, - decimalsInFloat: false, - }, - grid: { - borderColor: themeColors.btnRingVariant500, - strokeDashArray: 5, - xaxis: { - lines: { - show: true, - }, - }, - yaxis: { - lines: { - show: false, - }, - }, - column: { - colors: themeColors.btnRingVariant500, - opacity: 1, - }, - }, - tooltip: { - fillSeriesColor: themeColors.white, - title: { - formatter: (seriesName: string) => `$${seriesName}`, - }, - y: { - formatter: undefined, - title: { - formatter: (val: string) => { - return renderToString( - ${val}: - ); - }, - }, - }, - custom: ({ - series, - seriesIndex, - dataPointIndex, - w, - }: { - series: number[][]; - seriesIndex: number; - dataPointIndex: number; - w: TApexChartWindow; - }) => { - // .price-tooltip { - // padding: 0.6em 0.8em; - // display: flex; - // flex-direction: column; - // word-wrap: break-word; - // @apply bg-primaryVariant200 fontGroup-support text-primary; - - // .price { - // @apply fontGroup-supportBold; - - // span { - // @apply fontGroup-support; - // } - // } - // .date { - // padding-top: 1px; - // } - // } - return renderToString( -
- - {w.globals.seriesNames[0]}: {} - {new Intl.NumberFormat("en-US", { - style: "currency", - currency: "USD", - maximumFractionDigits: 2, - }).format(series[seriesIndex][dataPointIndex])} - - - {moment(data[dataPointIndex][0]).format( - "YYYY-MM-DD HH:mm" - )} - -
- ); - }, - }, - responsive: [ - { - breakpoint: 575, - options: { - chart: { - height: 200, - }, - xaxis: { - show: false, - }, - }, - }, - ], -}; - -const chartSeries = [ - { - name: "Price", - data, - }, -]; - function App() { return (
@@ -233,8 +20,8 @@ function App() {
diff --git a/packages/ui-kit/src/components/charts/mockData.tsx b/packages/ui-kit/src/components/charts/mockData.tsx new file mode 100644 index 00000000..a696b63c --- /dev/null +++ b/packages/ui-kit/src/components/charts/mockData.tsx @@ -0,0 +1,201 @@ +import moment from "moment"; +import { flushSync } from "react-dom"; +import { createRoot } from "react-dom/client"; +import { themeColors } from "src/globalStyles/themes"; + +type TApexChartWindow = { + globals: { + seriesNames: string[]; + }; +}; + +const renderToString = (node: JSX.Element): string => { + const wrapper = document.createElement("div"); + const root = createRoot(wrapper); + flushSync(() => root.render(node)); + return wrapper.innerHTML; +}; + +const data = [ + ["01-Feb-2024 GMT+1", 14], + ["02-Feb-2024 GMT+1", 14], + ["03-Feb-2024 GMT+1", 20], + ["04-Feb-2024 GMT+1", 16], + ["05-Feb-2024 GMT+1", 11], + ["06-Feb-2024 GMT+1", 19], + ["07-Feb-2024 GMT+1", 14], + ["08-Feb-2024 GMT+1", 8], + ["09-Feb-2024 GMT+1", 12], + ["10-Feb-2024 GMT+1", 20], + ["11-Feb-2024 GMT+1", 14], + ["12-Feb-2024 GMT+1", 7], + ["13-Feb-2024 GMT+1", 6], + ["14-Feb-2024 GMT+1", 21], +]; + +const options = { + chart: { + type: "area", + stacked: true, + zoom: { + enabled: true, + type: "x", + autoScaleYaxis: false, + zoomedArea: { + fill: { + color: themeColors.btnRingVariant400, + opacity: 0.4, + }, + stroke: { + color: themeColors.btnRingVariant200, + opacity: 0.4, + width: 1, + }, + }, + }, + toolbar: { + show: false, + }, + redrawOnParentResize: true, + }, + colors: ["rgba(109, 210, 48, 0.5)", "rgba(109, 210, 48, 0.5)"], + dataLabels: { + enabled: false, + }, + stroke: { + curve: "smooth", + width: 1.5, + }, + fill: { + type: "gradient", + gradient: { + type: "vertical", + gradientToColors: [themeColors.success, themeColors.success], + shadeIntensity: 1, + opacityFrom: 0.85, + opacityTo: 0.85, + stops: [0, 100], + }, + }, + legend: { + show: false, + }, + xaxis: { + type: "datetime", + tooltip: { + enabled: false, + }, + axisTicks: { + show: false, + }, + tickPlacement: "between", + tickAmount: Math.min(data.length, 8) - 1, + labels: { + datetimeUTC: false, + formatter(_val: string, timestamp: number) { + return moment(timestamp).format("DD-MM-YYYY"); + }, + style: { + colors: themeColors.btnRingVariant500, + fontSize: "10px", + fontFamily: "Arial, sans-serif", + fontWeight: 700, + cssClass: "apexcharts-xaxis-label", + }, + }, + }, + yaxis: { + show: false, + tickAmount: 3, + min: 0, + max: (max: number) => { + return max * 1.001; + }, + decimalsInFloat: false, + }, + grid: { + borderColor: themeColors.btnRingVariant500, + strokeDashArray: 5, + xaxis: { + lines: { + show: true, + }, + }, + yaxis: { + lines: { + show: false, + }, + }, + column: { + colors: themeColors.btnRingVariant500, + opacity: 1, + }, + }, + tooltip: { + fillSeriesColor: themeColors.white, + title: { + formatter: (seriesName: string) => `$${seriesName}`, + }, + y: { + formatter: undefined, + title: { + formatter: (val: string) => { + return renderToString( + ${val}: + ); + }, + }, + }, + custom: ({ + series, + seriesIndex, + dataPointIndex, + w, + }: { + series: number[][]; + seriesIndex: number; + dataPointIndex: number; + w: TApexChartWindow; + }) => { + return renderToString( +
+ + {w.globals.seriesNames[0]}: {} + {new Intl.NumberFormat("en-US", { + style: "currency", + currency: "USD", + maximumFractionDigits: 2, + }).format(series[seriesIndex][dataPointIndex])} + + + {moment(data[dataPointIndex][0]).format( + "YYYY-MM-DD HH:mm" + )} + +
+ ); + }, + }, + responsive: [ + { + breakpoint: 575, + options: { + chart: { + height: 200, + }, + xaxis: { + show: false, + }, + }, + }, + ], +}; + +export const BarChartSampleSeries = [ + { + name: "Price", + data, + }, +]; + +export const BarChartSampleOptions = options; From 0eb5b84fc20154e105a15235a289434f0741491b Mon Sep 17 00:00:00 2001 From: Xharles Date: Thu, 4 Jan 2024 17:47:11 +0100 Subject: [PATCH 4/4] rename items --- packages/ui-kit/src/components/charts/mockData.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/ui-kit/src/components/charts/mockData.tsx b/packages/ui-kit/src/components/charts/mockData.tsx index a696b63c..5eeeab38 100644 --- a/packages/ui-kit/src/components/charts/mockData.tsx +++ b/packages/ui-kit/src/components/charts/mockData.tsx @@ -16,7 +16,7 @@ const renderToString = (node: JSX.Element): string => { return wrapper.innerHTML; }; -const data = [ +const BarChartData = [ ["01-Feb-2024 GMT+1", 14], ["02-Feb-2024 GMT+1", 14], ["03-Feb-2024 GMT+1", 20], @@ -33,7 +33,7 @@ const data = [ ["14-Feb-2024 GMT+1", 21], ]; -const options = { +const BarChartOptions = { chart: { type: "area", stacked: true, @@ -89,7 +89,7 @@ const options = { show: false, }, tickPlacement: "between", - tickAmount: Math.min(data.length, 8) - 1, + tickAmount: Math.min(BarChartData.length, 8) - 1, labels: { datetimeUTC: false, formatter(_val: string, timestamp: number) { @@ -168,7 +168,7 @@ const options = { }).format(series[seriesIndex][dataPointIndex])} - {moment(data[dataPointIndex][0]).format( + {moment(BarChartData[dataPointIndex][0]).format( "YYYY-MM-DD HH:mm" )} @@ -194,8 +194,8 @@ const options = { export const BarChartSampleSeries = [ { name: "Price", - data, + data: BarChartData, }, ]; -export const BarChartSampleOptions = options; +export const BarChartSampleOptions = BarChartOptions;