@spaced-out/ui-design-system 0.4.11 → 0.4.13-beta.0

package/lib/utils/charts/donutChart.ts

@@ -0,0 +1,123 @@
+import type {ChartOptions, LegendOptionsType} from '../../types/charts';
+
+import {commonChartOptions} from './charts';
+import {deepMerge} from './helpers';
+
+
+type DonutChartPropsType = {
+  legend?: LegendOptionsType;
+  defaultCenterHTML?: string;
+};
+
+/**
+ * Defining these constants here so that internal calculations are self explanatory.
+ */
+const INNER_SIZE = 0.5; // set .5 here for 50% inner size w.r.t the pie chart outer circle.
+const LEGEND_WIDTH = 0.4; // set .4 here for 40% legend width w.r.t the plot width.
+const CHART_WIDTH = 1 - LEGEND_WIDTH;
+const CHART_CENTER = (1 - LEGEND_WIDTH) / 2;
+const CHART_SIZE = 0.8; // chart size w.r.t area allocated to chart drawing;
+
+export const rightLegendColumn = {
+  layout: 'vertical',
+  align: 'right',
+  verticalAlign: 'middle',
+  itemMarginBottom: 12,
+  symbolPadding: 8,
+  symbolWidth: 8,
+  // take it as 10% of width as left margin
+  width: `${LEGEND_WIDTH * 90}%`,
+} as const;
+
+/**
+ * This function modifies the the common chart behavior to donut chart default behavior.
+ * It will not take userPassed option into account.
+ */
+
+export const getDonutChartOptions = (
+  {
+    legend,
+    defaultCenterHTML,
+  }: DonutChartPropsType,
+): ChartOptions => {
+  const legendOption = deepMerge(commonChartOptions.legend, legend);
+  const isLegendEnabled = legendOption.enabled;
+  return {
+    ...commonChartOptions,
+    chart: {
+      ...commonChartOptions.chart,
+      type: 'pie',
+      spacing: [0, 0, 0, 0],
+      margin: [0, 0, 0, 0],
+// @ts-ignore - TS2322 - Type '{ type: string; spacing: number[]; margin: number[]; events: { render(): void; }; polar?: boolean | undefined; style?: CSSObject | undefined; spacingBottom?: number | undefined; spacingLeft?: number | undefined; spacingRight?: number | undefined; spacingTop?: number | undefined; }' is not assignable to type '{ polar?: boolean | undefined; type?: string | undefined; spacing?: number[] | undefined; margin?: number[] | undefined; style?: CSSObject | undefined; spacingBottom?: number | undefined; spacingLeft?: number | undefined; spacingRight?: number | undefined; spacingTop?: number | undefined; }'.
+      events: {
+        render() {
+          const chart = this;
+// @ts-ignore - TS2551 - Property 'renderTo' does not exist on type '{ render(): void; }'. Did you mean 'render'?
+          const containerWidth = chart.renderTo.offsetWidth;
+          const desiredHeight = CHART_WIDTH * containerWidth;
+          // 5px adjustment required due to borderWidth mostly.
+          const centerTextX = isLegendEnabled
+// @ts-ignore - TS2339 - Property 'plotWidth' does not exist on type '{ render(): void; }'.
+            ? parseInt(chart.plotWidth) * CHART_CENTER + 5
+            : 0;
+// @ts-ignore - TS2339 - Property 'update' does not exist on type '{ render(): void; }'.
+          chart.update(
+            {
+              chart: {
+                height: desiredHeight, // Set the height dynamically based on the container's width
+              },
+              subtitle: {
+                x: centerTextX,
+              },
+            },
+            false,
+          );
+        },
+      },
+    },
+    legend: {
+      ...legendOption,
+      ...rightLegendColumn,
+    },
+    plotOptions: {
+      pie: {
+        innerSize: `${INNER_SIZE * 100}%`,
+        allowPointSelect: true,
+        cursor: 'pointer',
+        dataLabels: {
+          // auto disabling the data label when legend is enabled.
+          enabled: !isLegendEnabled,
+          distance: 20,
+        },
+        showInLegend: true,
+        center: isLegendEnabled
+          ? [`${CHART_CENTER * 100}%`, '50%']
+          : ['50%', '50%'],
+        size: `${CHART_SIZE * 100}%`,
+        borderWidth: 5,
+        borderRadius: 10,
+        minSize: 240,
+// @ts-ignore - TS2322 - Type '{ innerSize: string; allowPointSelect: true; cursor: "pointer"; dataLabels: { enabled: boolean; distance: number; }; showInLegend: true; center: [string, string]; size: string; borderWidth: number; borderRadius: number; minSize: number; clip: false; }' is not assignable to type '{ innerSize?: string | undefined; allowPointSelect?: boolean | undefined; cursor?: "pointer" | undefined; dataLabels?: { enabled?: boolean | undefined; distance?: number | undefined; connectorColor?: string | undefined; useHTML?: boolean | undefined; format?: string | undefined; style?: CSSObject | undefined; } | un...'.
+        clip: false,
+      },
+    },
+    subtitle: {
+      useHTML: true,
+      text: defaultCenterHTML,
+      verticalAlign: 'middle',
+      align: isLegendEnabled ? 'left' : 'center',
+      style: {
+        alignContent: 'center',
+        // Note: Width was not working, have given miWidth and maxWidth
+        minWidth: isLegendEnabled
+          ? `${CHART_WIDTH * CHART_SIZE * INNER_SIZE * 80}%`
+          : `${CHART_SIZE * INNER_SIZE * 80}%`,
+        maxWidth: isLegendEnabled
+          ? `${CHART_WIDTH * CHART_SIZE * INNER_SIZE * 80}%`
+          : `${CHART_SIZE * INNER_SIZE * 80}%`,
+        ...(isLegendEnabled ? {transform: 'translate(-50%)'} : {}),
+      },
+    },
+  };
+};

package/lib/utils/charts/funnelChart.d.ts

@@ -0,0 +1,10 @@
+import type { FunnelSeriesItem } from '../../components/Charts/FunnelChart/FunnelChart';
+import type { ChartOptions, Drilldown } from '../../types/charts';
+/**
+ * This function modifies the the common chart behavior to funnel chart default behavior.
+ * It will not take userPassed option into account.
+ */
+export declare const getFunnelChartOptions: () => ChartOptions;
+export declare const addColorsToFunnelSeries: (series: Array<FunnelSeriesItem>, showInLegend?: boolean) => Array<FunnelSeriesItem>;
+export declare const addColorsToFunnelDrilldownSeries: (drilldownSeries: Drilldown, showInLegend?: boolean) => Drilldown;
+//# sourceMappingURL=funnelChart.d.ts.map

package/lib/utils/charts/funnelChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"funnelChart.d.ts","sourceRoot":"","sources":["../../../src/utils/charts/funnelChart.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,iDAAiD,CAAC;AAEtF,OAAO,KAAK,EACV,YAAY,EAEZ,SAAS,EACV,MAAM,oBAAoB,CAAC;AAW5B;;;GAGG;AAEH,eAAO,MAAM,qBAAqB,QAAO,YAoDvC,CAAC;AAEH,eAAO,MAAM,uBAAuB,GAAI,QAAQ,KAAK,CAAC,gBAAgB,CAAC,EAAE,eAAc,OAAc,KAAG,KAAK,CAAC,gBAAgB,CAO3H,CAAC;AAEJ,eAAO,MAAM,gCAAgC,GAAI,iBAAiB,SAAS,EAAE,eAAc,OAAc,KAAG,SAW1G,CAAC"}

package/lib/utils/charts/funnelChart.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getFunnelChartOptions = exports.addColorsToFunnelSeries = exports.addColorsToFunnelDrilldownSeries = void 0;
-var _color = require("../../styles/variables/_color.js");
+var _color = require("../../styles/variables/_color");
 var _charts = require("./charts");
 var _helpers = require("./helpers");
 var _typography = require("./typography");
@@ -12,6 +12,7 @@ var _typography = require("./typography");
  * This function modifies the the common chart behavior to funnel chart default behavior.
  * It will not take userPassed option into account.
  */
+
 const getFunnelChartOptions = () => ({
   ..._charts.commonChartOptions,
   chart: {
@@ -31,6 +32,7 @@ const getFunnelChartOptions = () => ({
       margin: 12,
       style: _helpers.xAxisTitleStyle
     },
+    // @ts-ignore - TS2322 - Type '{ labels: { style: { readonly fontSize: "12px"; readonly fontFamily: "Centra No 2"; readonly fontStyle: "normal"; readonly margin: 0; readonly color: "#17172A"; readonly letterSpacing: "0em"; readonly fontWeight: "500"; readonly display: "flex"; readonly alignItems: "center"; }; }; ... 6 more ...; type?: string | un...' is not assignable to type 'AxisOptions'.
     lineColor: _color.colorBorderPrimary
   },
   yAxis: {
@@ -81,8 +83,10 @@ exports.addColorsToFunnelSeries = addColorsToFunnelSeries;
 const addColorsToFunnelDrilldownSeries = function (drilldownSeries) {
   let showInLegend = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   return {
+    // @ts-ignore - TS2322 - Type 'SeriesOptionsType' is not assignable to type 'SeriesOptionsType'.
     series: drilldownSeries.series?.map(series => ({
       ...series,
+      // @ts-ignore - TS7006 - Parameter 'dataPoint' implicitly has an 'any' type. | TS7006 - Parameter 'index' implicitly has an 'any' type.
       data: series.data.map((dataPoint, index) => ({
         ...dataPoint,
         color: (0, _charts.getDataVizColor)(index) // Assign a color dynamically based on index

package/lib/utils/charts/funnelChart.ts

@@ -0,0 +1,97 @@
+import type {FunnelSeriesItem} from '../../components/Charts/FunnelChart/FunnelChart';
+import {colorBorderPrimary} from '../../styles/variables/_color';
+import type {
+  ChartOptions,
+  DataOptionsType,
+  Drilldown,
+} from '../../types/charts';
+
+import {commonChartOptions, getDataVizColor} from './charts';
+import {
+  bottomLegendRow,
+  xAxisTitleStyle,
+  yAxisLabelStyle,
+  yAxisTitleStyle,
+} from './helpers';
+import {formLabelSmall} from './typography';
+
+/**
+ * This function modifies the the common chart behavior to funnel chart default behavior.
+ * It will not take userPassed option into account.
+ */
+
+export const getFunnelChartOptions = (): ChartOptions => ({
+  ...commonChartOptions,
+  chart: {
+    type: 'funnel',
+  },
+  legend: {
+    ...commonChartOptions.legend,
+    ...bottomLegendRow,
+    symbolWidth: 18,
+  },
+  xAxis: {
+    ...commonChartOptions.xAxis,
+    labels: {
+      style: formLabelSmall,
+    },
+    title: {
+      margin: 12,
+      style: xAxisTitleStyle,
+    },
+// @ts-ignore - TS2322 - Type '{ labels: { style: { readonly fontSize: "12px"; readonly fontFamily: "Centra No 2"; readonly fontStyle: "normal"; readonly margin: 0; readonly color: "#17172A"; readonly letterSpacing: "0em"; readonly fontWeight: "500"; readonly display: "flex"; readonly alignItems: "center"; }; }; ... 6 more ...; type?: string | un...' is not assignable to type 'AxisOptions'.
+    lineColor: colorBorderPrimary,
+  },
+  yAxis: {
+    labels: {
+      align: 'right',
+      distance: 12,
+      style: yAxisLabelStyle,
+    },
+    title: {
+      margin: 12,
+      style: yAxisTitleStyle,
+    },
+  },
+  plotOptions: {
+    funnel: {
+      neckWidth: '15%',
+      neckHeight: '10%',
+      minSize: '50%',
+      width: '55%',
+      dataLabels: {
+        enabled: true,
+        useHTML: true, // Allows custom HTML formatting
+        format: `<div style="text-align: center">
+          <span>{point.name}</span><br>
+          <span>{point.y}</span>
+          </div>`,
+        style: {
+          fontWeight: 'bold',
+        },
+      },
+    },
+  },
+});
+
+export const addColorsToFunnelSeries = (series: Array<FunnelSeriesItem>, showInLegend: boolean = true): Array<FunnelSeriesItem> => series.map((item: FunnelSeriesItem) => ({
+  ...item,
+  data: item.data.map((seriesItem: DataOptionsType, index: number) => ({
+    ...seriesItem,
+    color: getDataVizColor(index), // Apply color based on index
+  })),
+  showInLegend, // Ensure legend visibility
+}));
+
+export const addColorsToFunnelDrilldownSeries = (drilldownSeries: Drilldown, showInLegend: boolean = true): Drilldown => ({
+  // @ts-ignore - TS2322 - Type 'SeriesOptionsType' is not assignable to type 'SeriesOptionsType'.
+  series: drilldownSeries.series?.map((series: SeriesOptionsType) => ({
+    ...series,
+// @ts-ignore - TS7006 - Parameter 'dataPoint' implicitly has an 'any' type. | TS7006 - Parameter 'index' implicitly has an 'any' type.
+    data: series.data.map((dataPoint, index) => ({
+      ...dataPoint,
+      color: getDataVizColor(index), // Assign a color dynamically based on index
+    })),
+    showInLegend, // Ensure legend is displayed
+  })),
+});

package/lib/utils/charts/helpers.d.ts

@@ -0,0 +1,76 @@
+export declare const deepMerge: <T extends Record<any, any>>(obj1: Partial<T> | null | undefined, obj2: Partial<T> | null | undefined, ...args: Array<Partial<T> | null | undefined>) => T;
+export declare const rightLineLegendColumn: {
+    readonly layout: "vertical";
+    readonly align: "right";
+    readonly verticalAlign: "middle";
+    readonly itemMarginBottom: 12;
+    readonly symbolPadding: 4;
+    readonly symbolWidth: 16;
+    readonly width: "40%";
+};
+export declare const bottomLegendRow: {
+    readonly layout: "horizontal";
+    readonly align: "center";
+    readonly verticalAlign: "bottom";
+    readonly itemDistance: 20;
+    readonly symbolPadding: 4;
+    readonly symbolWidth: 16;
+};
+export declare const yAxisTitleStyle: {
+    readonly color: "#565656";
+    readonly fontSize: "12px";
+    readonly fontWeight: "400";
+    readonly letterSpacing: "0.04em";
+    readonly fontFamily: "Centra No 2";
+    readonly fontStyle: "normal";
+    readonly margin: 0;
+    readonly display: "flex";
+    readonly alignItems: "center";
+};
+export declare const xAxisTitleStyle: {
+    readonly color: "#565656";
+    readonly fontSize: "12px";
+    readonly fontWeight: "400";
+    readonly letterSpacing: "0.04em";
+    readonly fontFamily: "Centra No 2";
+    readonly fontStyle: "normal";
+    readonly margin: 0;
+    readonly display: "flex";
+    readonly alignItems: "center";
+};
+export declare const yAxisLabelStyle: {
+    readonly fontSize: "12px";
+    readonly fontFamily: "Centra No 2";
+    readonly fontStyle: "normal";
+    readonly margin: 0;
+    readonly color: "#17172A";
+    readonly letterSpacing: "0em";
+    readonly fontWeight: "500";
+    readonly display: "flex";
+    readonly alignItems: "center";
+};
+export declare const xAxisLabelStyle: {
+    readonly fontSize: "12px";
+    readonly letterSpacing: "0.01em";
+    readonly fontFamily: "Centra No 2";
+    readonly fontStyle: "normal";
+    readonly margin: 0;
+    readonly color: "#17172A";
+    readonly fontWeight: "500";
+    readonly display: "flex";
+    readonly alignItems: "center";
+};
+export declare const activeLabelStyle: {
+    readonly color: "#17172A";
+    readonly fill: "#17172A";
+    readonly textDecoration: "underline";
+    readonly fontSize: "12px";
+    readonly letterSpacing: "0.01em";
+    readonly fontFamily: "Centra No 2";
+    readonly fontStyle: "normal";
+    readonly margin: 0;
+    readonly fontWeight: "500";
+    readonly display: "flex";
+    readonly alignItems: "center";
+};
+//# sourceMappingURL=helpers.d.ts.map

package/lib/utils/charts/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/utils/charts/helpers.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,EAClD,MAAM,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,EACnC,MAAM,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,EACnC,GAAG,MAAM,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC,KAC5C,CAC2B,CAAC;AAE/B,eAAO,MAAM,qBAAqB;;;;;;;;CAQxB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;CAOlB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;;CAGlB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;;CAGlB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;;CAElB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;;CAElB,CAAC;AAEX,eAAO,MAAM,gBAAgB;;;;;;;;;;;;CAKnB,CAAC"}

package/lib/utils/charts/helpers.ts

@@ -0,0 +1,65 @@
+import merge from 'lodash/merge';
+
+import {
+  colorTextPrimary,
+  colorTextSecondary,
+} from '../../styles/variables/_color';
+
+import {
+  bodySmall,
+  buttonTextExtraSmall,
+  formLabelSmall,
+  underline,
+} from './typography';
+
+
+export const deepMerge = <T extends Record<any, any>>(
+  obj1: Partial<T> | null | undefined,
+  obj2: Partial<T> | null | undefined,
+  ...args: Array<Partial<T> | null | undefined>
+): T => // {} is used here to ensure obj1 is not modified
+merge({}, obj1, obj2, ...args);
+
+export const rightLineLegendColumn = {
+  layout: 'vertical',
+  align: 'right',
+  verticalAlign: 'middle',
+  itemMarginBottom: 12,
+  symbolPadding: 4,
+  symbolWidth: 16,
+  width: '40%',
+} as const;
+
+export const bottomLegendRow = {
+  layout: 'horizontal',
+  align: 'center',
+  verticalAlign: 'bottom',
+  itemDistance: 20,
+  symbolPadding: 4,
+  symbolWidth: 16,
+} as const;
+
+export const yAxisTitleStyle = {
+  ...bodySmall,
+  color: colorTextSecondary,
+} as const;
+
+export const xAxisTitleStyle = {
+  ...bodySmall,
+  color: colorTextSecondary,
+} as const;
+
+export const yAxisLabelStyle = {
+  ...formLabelSmall,
+} as const;
+
+export const xAxisLabelStyle = {
+  ...buttonTextExtraSmall,
+} as const;
+
+export const activeLabelStyle = {
+  ...buttonTextExtraSmall,
+  ...underline,
+  color: colorTextPrimary,
+  fill: colorTextPrimary,
+} as const;

package/lib/utils/charts/index.d.ts

@@ -0,0 +1,8 @@
+export * from './charts';
+export * from './columnChart';
+export * from './donutChart';
+export * from './helpers';
+export * from './lineChart';
+export * from './spiderChart';
+export * from './typography';
+//# sourceMappingURL=index.d.ts.map

package/lib/utils/charts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/charts/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC"}

package/lib/utils/charts/index.ts

@@ -0,0 +1,7 @@
+export * from './charts';
+export * from './columnChart';
+export * from './donutChart';
+export * from './helpers';
+export * from './lineChart';
+export * from './spiderChart';
+export * from './typography';

package/lib/utils/charts/lineChart.d.ts

@@ -0,0 +1,7 @@
+import type { ChartOptions } from '../../types/charts';
+/**
+ * This function modifies the the common chart behavior to line chart default behavior.
+ * It will not take userPassed option into account.
+ */
+export declare const getLineChartOptions: () => ChartOptions;
+//# sourceMappingURL=lineChart.d.ts.map

package/lib/utils/charts/lineChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lineChart.d.ts","sourceRoot":"","sources":["../../../src/utils/charts/lineChart.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAWrD;;;GAGG;AAEH,eAAO,MAAM,mBAAmB,QAAO,YAiCrC,CAAC"}

package/lib/utils/charts/lineChart.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getLineChartOptions = void 0;
-var _color = require("../../styles/variables/_color.js");
+var _color = require("../../styles/variables/_color");
 var _charts = require("./charts");
 var _helpers = require("./helpers");
 var _typography = require("./typography");
@@ -12,6 +12,7 @@ var _typography = require("./typography");
  * This function modifies the the common chart behavior to line chart default behavior.
  * It will not take userPassed option into account.
  */
+
 const getLineChartOptions = () => ({
   ..._charts.commonChartOptions,
   chart: {
@@ -31,6 +32,7 @@ const getLineChartOptions = () => ({
       margin: 12,
       style: _helpers.xAxisTitleStyle
     },
+    // @ts-ignore - TS2322 - Type '{ labels: { style: { readonly fontSize: "12px"; readonly fontFamily: "Centra No 2"; readonly fontStyle: "normal"; readonly margin: 0; readonly color: "#17172A"; readonly letterSpacing: "0em"; readonly fontWeight: "500"; readonly display: "flex"; readonly alignItems: "center"; }; }; ... 6 more ...; type?: string | un...' is not assignable to type 'AxisOptions'.
     lineColor: _color.colorBorderPrimary
   },
   yAxis: {

package/lib/utils/charts/lineChart.ts

@@ -0,0 +1,51 @@
+import {colorBorderPrimary} from '../../styles/variables/_color';
+import type {ChartOptions} from '../../types/charts';
+
+import {commonChartOptions} from './charts';
+import {
+  bottomLegendRow,
+  xAxisTitleStyle,
+  yAxisLabelStyle,
+  yAxisTitleStyle,
+} from './helpers';
+import {formLabelSmall} from './typography';
+
+/**
+ * This function modifies the the common chart behavior to line chart default behavior.
+ * It will not take userPassed option into account.
+ */
+
+export const getLineChartOptions = (): ChartOptions => ({
+  ...commonChartOptions,
+  chart: {
+    type: 'line',
+  },
+  legend: {
+    ...commonChartOptions.legend,
+    ...bottomLegendRow,
+    symbolWidth: 18,
+  },
+  xAxis: {
+    ...commonChartOptions.xAxis,
+    labels: {
+      style: formLabelSmall,
+    },
+    title: {
+      margin: 12,
+      style: xAxisTitleStyle,
+    },
+// @ts-ignore - TS2322 - Type '{ labels: { style: { readonly fontSize: "12px"; readonly fontFamily: "Centra No 2"; readonly fontStyle: "normal"; readonly margin: 0; readonly color: "#17172A"; readonly letterSpacing: "0em"; readonly fontWeight: "500"; readonly display: "flex"; readonly alignItems: "center"; }; }; ... 6 more ...; type?: string | un...' is not assignable to type 'AxisOptions'.
+    lineColor: colorBorderPrimary,
+  },
+  yAxis: {
+    labels: {
+      align: 'right',
+      distance: 12,
+      style: yAxisLabelStyle,
+    },
+    title: {
+      margin: 12,
+      style: yAxisTitleStyle,
+    },
+  },
+});

package/lib/utils/charts/spiderChart.d.ts

@@ -0,0 +1,18 @@
+import type { ChartOptions } from '../../types/charts';
+export declare const bodySmallSecondary: {
+    readonly color: "#565656";
+    readonly fontSize: "12px";
+    readonly fontWeight: "400";
+    readonly letterSpacing: "0.04em";
+    readonly fontFamily: "Centra No 2";
+    readonly fontStyle: "normal";
+    readonly margin: 0;
+    readonly display: "flex";
+    readonly alignItems: "center";
+};
+/**
+ * This function modifies the the common chart behavior to spider chart default behavior.
+ * It will not take userPassed option into account.
+ */
+export declare const getSpiderChartOptions: () => ChartOptions;
+//# sourceMappingURL=spiderChart.d.ts.map

package/lib/utils/charts/spiderChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spiderChart.d.ts","sourceRoot":"","sources":["../../../src/utils/charts/spiderChart.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAOrD,eAAO,MAAM,kBAAkB;;;;;;;;;;CAGrB,CAAC;AAEX;;;GAGG;AAEH,eAAO,MAAM,qBAAqB,QAAO,YAsCvC,CAAC"}

package/lib/utils/charts/spiderChart.ts

@@ -0,0 +1,57 @@
+import {colorTextSecondary} from '../../styles/variables/_color';
+import type {ChartOptions} from '../../types/charts';
+
+import {commonChartOptions} from './charts';
+import {rightLineLegendColumn} from './helpers';
+import {bodySmall} from './typography';
+
+
+export const bodySmallSecondary = {
+  ...bodySmall,
+  color: colorTextSecondary,
+} as const;
+
+/**
+ * This function modifies the the common chart behavior to spider chart default behavior.
+ * It will not take userPassed option into account.
+ */
+
+export const getSpiderChartOptions = (): ChartOptions => ({
+  ...commonChartOptions,
+  chart: {
+    ...commonChartOptions.chart,
+    polar: true,
+    type: 'line',
+    spacing: [0, 0, 0, 0],
+    margin: [0, 0, 0, 0],
+  },
+  xAxis: {
+    ...commonChartOptions.xAxis,
+    labels: {
+      style: bodySmallSecondary,
+    },
+    lineWidth: 0,
+    tickmarkPlacement: 'on',
+  },
+  yAxis: {
+    labels: {
+      style: bodySmallSecondary,
+    },
+    gridLineInterpolation: 'polygon',
+    lineWidth: 0,
+  },
+  legend: {
+    ...commonChartOptions.legend,
+    ...rightLineLegendColumn,
+    symbolWidth: 18,
+  },
+  pane: {
+    center: ['30%', '50%'],
+    size: '70%',
+  },
+  tooltip: {
+    ...commonChartOptions.tooltip,
+    followPointer: false,
+    shared: true,
+  },
+});

package/lib/utils/charts/typography.d.ts

@@ -0,0 +1,58 @@
+export declare const baseType: {
+    readonly fontFamily: "Centra No 2";
+    readonly fontStyle: "normal";
+    readonly margin: 0;
+    readonly color: "#17172A";
+    readonly letterSpacing: "0em";
+    readonly fontWeight: "500";
+    readonly display: "flex";
+    readonly alignItems: "center";
+};
+export declare const bodySmall: {
+    readonly fontSize: "12px";
+    readonly fontWeight: "400";
+    readonly letterSpacing: "0.04em";
+    readonly fontFamily: "Centra No 2";
+    readonly fontStyle: "normal";
+    readonly margin: 0;
+    readonly color: "#17172A";
+    readonly display: "flex";
+    readonly alignItems: "center";
+};
+export declare const formLabelSmall: {
+    readonly fontSize: "12px";
+    readonly fontFamily: "Centra No 2";
+    readonly fontStyle: "normal";
+    readonly margin: 0;
+    readonly color: "#17172A";
+    readonly letterSpacing: "0em";
+    readonly fontWeight: "500";
+    readonly display: "flex";
+    readonly alignItems: "center";
+};
+export declare const buttonTextExtraSmall: {
+    readonly fontSize: "12px";
+    readonly letterSpacing: "0.01em";
+    readonly fontFamily: "Centra No 2";
+    readonly fontStyle: "normal";
+    readonly margin: 0;
+    readonly color: "#17172A";
+    readonly fontWeight: "500";
+    readonly display: "flex";
+    readonly alignItems: "center";
+};
+export declare const underline: {
+    readonly textDecoration: "underline";
+};
+export declare const subTitleExtraSmall: {
+    readonly fontSize: "12px";
+    readonly letterSpacing: "0em";
+    readonly fontFamily: "Centra No 2";
+    readonly fontStyle: "normal";
+    readonly margin: 0;
+    readonly color: "#17172A";
+    readonly fontWeight: "500";
+    readonly display: "flex";
+    readonly alignItems: "center";
+};
+//# sourceMappingURL=typography.d.ts.map

package/lib/utils/charts/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/utils/charts/typography.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,QAAQ;;;;;;;;;CASX,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;;;;;;CAKZ,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;;;;;;CAIjB,CAAC;AAEX,eAAO,MAAM,oBAAoB;;;;;;;;;;CAKvB,CAAC;AAEX,eAAO,MAAM,SAAS;;CAEZ,CAAC;AAEX,eAAO,MAAM,kBAAkB;;;;;;;;;;CAKrB,CAAC"}