@spaced-out/ui-design-system 0.1.85 → 0.1.87-beta.0

package/lib/utils/charts/columnChart.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getColumnChartOptions = exports.columnPlotWidth = void 0;
+var _charts = require("./charts");
+var _helpers = require("./helpers");
+
+/**
+ * This function modifies the the common chart behavior to column chart default behavior.
+ * It will not take userPassed option into account.
+ */
+
+const getColumnChartOptions = () => ({
+  ..._charts.commonChartOptions,
+  chart: {
+    type: 'column'
+  },
+  legend: {
+    ..._charts.commonChartOptions.legend,
+    ..._helpers.bottomLegendRow,
+    symbolWidth: 18
+  },
+  xAxis: {
+    labels: {
+      style: _helpers.xAxisLabelStyle
+    },
+    title: {
+      margin: 12,
+      style: _helpers.xAxisTitleStyle
+    }
+  },
+  yAxis: {
+    labels: {
+      align: 'right',
+      distance: 12,
+      style: _helpers.yAxisLabelStyle
+    },
+    title: {
+      margin: 12,
+      style: _helpers.yAxisTitleStyle
+    }
+  },
+  drilldown: {
+    activeAxisLabelStyle: _helpers.activeLabelStyle,
+    activeDataLabelStyle: _helpers.activeLabelStyle,
+    breadcrumbs: {
+      floating: true
+    }
+  }
+});
+exports.getColumnChartOptions = getColumnChartOptions;
+const columnPlotWidth = 28;
+exports.columnPlotWidth = columnPlotWidth;

package/lib/utils/charts/columnChart.js.flow

@@ -0,0 +1,59 @@
+// @flow strict
+
+import type {ChartOptions} from '../../types/charts';
+
+import {commonChartOptions} from './charts';
+import {
+  activeLabelStyle,
+  bottomLegendRow,
+  xAxisLabelStyle,
+  xAxisTitleStyle,
+  yAxisLabelStyle,
+  yAxisTitleStyle,
+} from './helpers';
+
+/**
+ * This function modifies the the common chart behavior to column chart default behavior.
+ * It will not take userPassed option into account.
+ */
+
+export const getColumnChartOptions = (): ChartOptions => ({
+  ...commonChartOptions,
+  chart: {
+    type: 'column',
+  },
+  legend: {
+    ...commonChartOptions.legend,
+    ...bottomLegendRow,
+    symbolWidth: 18,
+  },
+  xAxis: {
+    labels: {
+      style: xAxisLabelStyle,
+    },
+    title: {
+      margin: 12,
+      style: xAxisTitleStyle,
+    },
+  },
+  yAxis: {
+    labels: {
+      align: 'right',
+      distance: 12,
+      style: yAxisLabelStyle,
+    },
+    title: {
+      margin: 12,
+      style: yAxisTitleStyle,
+    },
+  },
+  drilldown: {
+    activeAxisLabelStyle: activeLabelStyle,
+    activeDataLabelStyle: activeLabelStyle,
+    breadcrumbs: {
+      floating: true,
+    },
+  },
+});
+
+export const columnPlotWidth = 28;

package/lib/utils/charts/donutChart.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rightLegendColumn = exports.getDonutChartOptions = void 0;
+var _charts = require("./charts");
+var _helpers = require("./helpers");
+
+/**
+ * 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;
+
+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}%`
+};
+exports.rightLegendColumn = rightLegendColumn;
+const commonLegendOption = _charts.commonChartOptions.legend;
+
+/**
+ * This function modifies the the common chart behavior to donut chart default behavior.
+ * It will not take userPassed option into account.
+ */
+
+const getDonutChartOptions = _ref => {
+  let {
+    legend,
+    defaultCenterHTML,
+    subtitleSize,
+    centerTextX,
+    tooltip
+  } = _ref;
+  const legendOption = (0, _helpers.deepMerge)(_charts.commonChartOptions.legend, legend);
+  const isLegendEnabled = legendOption.enabled;
+  return {
+    ..._charts.commonChartOptions,
+    chart: {
+      ..._charts.commonChartOptions.chart,
+      type: 'pie',
+      spacing: [0, 0, 0, 0],
+      margin: [0, 0, 0, 0],
+      events: {
+        render() {
+          //$FlowFixMe[object-this-reference]
+          const chart = this;
+          const containerWidth = chart.renderTo.offsetWidth;
+          const desiredHeight = CHART_WIDTH * containerWidth;
+          // 5px adjustment required due to borderWidth mostly.
+          const centerTextX = isLegendEnabled ? parseInt(chart.plotWidth) * CHART_CENTER + 5 : 0;
+          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,
+        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%)'
+        } : {})
+      }
+    }
+  };
+};
+exports.getDonutChartOptions = getDonutChartOptions;

package/lib/utils/charts/donutChart.js.flow

@@ -0,0 +1,138 @@
+// @flow strict
+
+import type {
+  ChartOptions,
+  LegendOptionsType,
+  Tooltip,
+} from '../../types/charts';
+
+import {commonChartOptions} from './charts';
+import {deepMerge} from './helpers';
+
+
+type DonutChartDataType = {
+  name?: string,
+  color?: string,
+  y?: number,
+};
+
+type DonutChartPropsType = {
+  legend?: LegendOptionsType,
+  defaultCenterHTML?: string,
+  subtitleSize?: string,
+  centerTextX?: number,
+  tooltip?: Tooltip,
+};
+
+/**
+ * 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}%`,
+};
+
+const commonLegendOption = commonChartOptions.legend;
+
+/**
+ * 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,
+  subtitleSize,
+  centerTextX,
+  tooltip,
+}: //$FlowFixMe[prop-missing]
+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],
+      events: {
+        render() {
+          //$FlowFixMe[object-this-reference]
+          const chart = this;
+          const containerWidth = chart.renderTo.offsetWidth;
+          const desiredHeight = CHART_WIDTH * containerWidth;
+          // 5px adjustment required due to borderWidth mostly.
+          const centerTextX = isLegendEnabled
+            ? parseInt(chart.plotWidth) * CHART_CENTER + 5
+            : 0;
+          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,
+        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/helpers.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.yAxisTitleStyle = exports.yAxisLabelStyle = exports.xAxisTitleStyle = exports.xAxisLabelStyle = exports.rightLineLegendColumn = exports.deepMerge = exports.bottomLegendRow = exports.activeLabelStyle = void 0;
+var _merge = _interopRequireDefault(require("lodash/merge"));
+var _color = require("../../styles/variables/_color");
+var _typography = require("./typography");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const deepMerge = function (obj1, obj2) {
+  for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    args[_key - 2] = arguments[_key];
+  }
+  return (
+    // {} is used here to ensure obj1 is not modified
+    (0, _merge.default)({}, obj1, obj2, ...args)
+  );
+};
+exports.deepMerge = deepMerge;
+const rightLineLegendColumn = {
+  layout: 'vertical',
+  align: 'right',
+  verticalAlign: 'middle',
+  itemMarginBottom: 12,
+  symbolPadding: 4,
+  symbolWidth: 16,
+  width: '40%'
+};
+exports.rightLineLegendColumn = rightLineLegendColumn;
+const bottomLegendRow = {
+  layout: 'horizontal',
+  align: 'center',
+  verticalAlign: 'bottom',
+  itemDistance: 20,
+  symbolPadding: 4,
+  symbolWidth: 16
+};
+exports.bottomLegendRow = bottomLegendRow;
+const yAxisTitleStyle = {
+  ..._typography.bodySmall,
+  color: _color.colorTextSecondary
+};
+exports.yAxisTitleStyle = yAxisTitleStyle;
+const xAxisTitleStyle = {
+  ..._typography.bodySmall,
+  color: _color.colorTextSecondary
+};
+exports.xAxisTitleStyle = xAxisTitleStyle;
+const yAxisLabelStyle = {
+  ..._typography.formLabelSmall
+};
+exports.yAxisLabelStyle = yAxisLabelStyle;
+const xAxisLabelStyle = {
+  ..._typography.buttonTextExtraSmall
+};
+exports.xAxisLabelStyle = xAxisLabelStyle;
+const activeLabelStyle = {
+  ..._typography.buttonTextExtraSmall,
+  ..._typography.underline,
+  color: _color.colorTextPrimary,
+  fill: _color.colorTextPrimary
+};
+exports.activeLabelStyle = activeLabelStyle;

package/lib/utils/charts/helpers.js.flow

@@ -0,0 +1,68 @@
+// @flow strict
+
+import merge from 'lodash/merge';
+
+import {
+  colorTextPrimary,
+  colorTextSecondary,
+} from '../../styles/variables/_color';
+
+import {
+  bodySmall,
+  buttonTextExtraSmall,
+  formLabelSmall,
+  underline,
+} from './typography';
+
+
+export const deepMerge = <T: {}>(
+  obj1?: $Shape<T>,
+  obj2?: $Shape<T>,
+  ...args: Array<?$Shape<T>>
+): 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%',
+};
+
+export const bottomLegendRow = {
+  layout: 'horizontal',
+  align: 'center',
+  verticalAlign: 'bottom',
+  itemDistance: 20,
+  symbolPadding: 4,
+  symbolWidth: 16,
+};
+
+export const yAxisTitleStyle = {
+  ...bodySmall,
+  color: colorTextSecondary,
+};
+
+export const xAxisTitleStyle = {
+  ...bodySmall,
+  color: colorTextSecondary,
+};
+
+export const yAxisLabelStyle = {
+  ...formLabelSmall,
+};
+
+export const xAxisLabelStyle = {
+  ...buttonTextExtraSmall,
+};
+
+export const activeLabelStyle = {
+  ...buttonTextExtraSmall,
+  ...underline,
+  color: colorTextPrimary,
+  fill: colorTextPrimary,
+};

package/lib/utils/charts/index.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _charts = require("./charts");
+Object.keys(_charts).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _charts[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _charts[key];
+    }
+  });
+});
+var _columnChart = require("./columnChart");
+Object.keys(_columnChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _columnChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _columnChart[key];
+    }
+  });
+});
+var _donutChart = require("./donutChart");
+Object.keys(_donutChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _donutChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _donutChart[key];
+    }
+  });
+});
+var _helpers = require("./helpers");
+Object.keys(_helpers).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _helpers[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _helpers[key];
+    }
+  });
+});
+var _lineChart = require("./lineChart");
+Object.keys(_lineChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _lineChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _lineChart[key];
+    }
+  });
+});
+var _spiderChart = require("./spiderChart");
+Object.keys(_spiderChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _spiderChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _spiderChart[key];
+    }
+  });
+});
+var _typography = require("./typography");
+Object.keys(_typography).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _typography[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _typography[key];
+    }
+  });
+});

package/lib/utils/charts/index.js.flow

@@ -0,0 +1,9 @@
+// @flow strict
+
+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.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLineChartOptions = void 0;
+var _charts = require("./charts");
+var _helpers = require("./helpers");
+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: {
+    type: 'line'
+  },
+  legend: {
+    ..._charts.commonChartOptions.legend,
+    ..._helpers.bottomLegendRow,
+    symbolWidth: 18
+  },
+  xAxis: {
+    labels: {
+      style: _typography.formLabelSmall
+    },
+    title: {
+      margin: 12,
+      style: _helpers.xAxisTitleStyle
+    }
+  },
+  yAxis: {
+    labels: {
+      align: 'right',
+      distance: 12,
+      style: _helpers.yAxisLabelStyle
+    },
+    title: {
+      margin: 12,
+      style: _helpers.yAxisTitleStyle
+    }
+  }
+});
+exports.getLineChartOptions = getLineChartOptions;

package/lib/utils/charts/lineChart.js.flow

@@ -0,0 +1,49 @@
+// @flow strict
+
+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: {
+    labels: {
+      style: formLabelSmall,
+    },
+    title: {
+      margin: 12,
+      style: xAxisTitleStyle,
+    },
+  },
+  yAxis: {
+    labels: {
+      align: 'right',
+      distance: 12,
+      style: yAxisLabelStyle,
+    },
+    title: {
+      margin: 12,
+      style: yAxisTitleStyle,
+    },
+  },
+});