-
-
-
- Tyring out Prose
-
+ {/*
*/}
+
);
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..5eeeab38
--- /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 BarChartData = [
+ ["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 BarChartOptions = {
+ 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(BarChartData.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(BarChartData[dataPointIndex][0]).format(
+ "YYYY-MM-DD HH:mm"
+ )}
+
+
+ );
+ },
+ },
+ responsive: [
+ {
+ breakpoint: 575,
+ options: {
+ chart: {
+ height: 200,
+ },
+ xaxis: {
+ show: false,
+ },
+ },
+ },
+ ],
+};
+
+export const BarChartSampleSeries = [
+ {
+ name: "Price",
+ data: BarChartData,
+ },
+];
+
+export const BarChartSampleOptions = BarChartOptions;
diff --git a/packages/ui-kit/src/globalStyles/charts.scss b/packages/ui-kit/src/globalStyles/charts.scss
index b2f2db27..785510ba 100644
--- a/packages/ui-kit/src/globalStyles/charts.scss
+++ b/packages/ui-kit/src/globalStyles/charts.scss
@@ -192,3 +192,55 @@
}
}
}
+
+.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 {
+ & > 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