@spaced-out/ui-design-system 0.1.91 → 0.1.93-beta.0

package/lib/components/SpiderChart/SpiderChart.js.flow

@@ -66,29 +66,10 @@ export const SpiderChart = ({
   cardTitle,
   customExportOptions,
   headerActions,
-  legend,
   series,
-  xAxis: {
-    categories,
-    tickmarkPlacement = 'on',
-    lineWidth: xAxisLineWidth = 0,
-    ...xAxisProps
-  } = {},
-  yAxis: {
-    gridLineInterpolation = 'polygon',
-    lineWidth: yAxisLineWidth = 0,
-    min: yAxisMin = 0,
-    ...yAxisProps
-  } = {},
-
   ...userOptions
 }: SpiderChartProps): React.Node => {
   const chartRef = React.useRef(null);
-  const [chartWidth, setChartWidth] = React.useState(0);
-
-  React.useLayoutEffect(() => {
-    setChartWidth(chartRef.current?.chart.plotWidth);
-  }, []);
 
   const spiderSeries = series.map((seriesItem, index) => ({
     ...seriesItem,
@@ -111,7 +92,6 @@ export const SpiderChart = ({
   return (
     <ChartWrapper
       title={cardTitle}
-      //$FlowFixMe[incompatible-type]
       ref={chartRef}
       customExportOptions={customExportOptions}
       classNames={wrapperClassNames}

package/lib/components/index.js

@@ -168,6 +168,17 @@ Object.keys(_ConditionalWrapper).forEach(function (key) {
     }
   });
 });
+var _DateRangePicker = require("./DateRangePicker");
+Object.keys(_DateRangePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DateRangePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DateRangePicker[key];
+    }
+  });
+});
 var _Dialog = require("./Dialog");
 Object.keys(_Dialog).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -15,6 +15,7 @@ export * from './Chip';
 export * from './CircularLoader';
 export * from './CollapsibleCard';
 export * from './ConditionalWrapper';
+export * from './DateRangePicker';
 export * from './Dialog';
 export * from './Dropdown';
 export * from './EmptyState';

package/lib/types/charts.js.flow

@@ -58,6 +58,7 @@ export type AxisOptions = {
     margin?: number,
     style: ?CSSObject,
   },
+  type?: string,
 };
 
 export type BreadcrumbsOptions = {

package/lib/utils/charts/charts.js

@@ -64,6 +64,9 @@ const commonChartOptions = {
     },
     symbolHeight: 8,
     enabled: true
+  },
+  xAxis: {
+    type: 'category'
   }
 };
 exports.commonChartOptions = commonChartOptions;

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

@@ -81,6 +81,9 @@ export const commonChartOptions: $Shape<ChartOptions> = {
     symbolHeight: 8,
     enabled: true,
   },
+  xAxis: {
+    type: 'category',
+  },
 };
 
 export const mergeChartUserOptions = (

package/lib/utils/charts/columnChart.js

@@ -23,6 +23,7 @@ const getColumnChartOptions = () => ({
     symbolWidth: 18
   },
   xAxis: {
+    ..._charts.commonChartOptions.xAxis,
     labels: {
       style: _helpers.xAxisLabelStyle
     },

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

@@ -28,6 +28,7 @@ export const getColumnChartOptions = (): ChartOptions => ({
     symbolWidth: 18,
   },
   xAxis: {
+    ...commonChartOptions.xAxis,
     labels: {
       style: xAxisLabelStyle,
     },

package/lib/utils/charts/lineChart.js

@@ -24,6 +24,7 @@ const getLineChartOptions = () => ({
     symbolWidth: 18
   },
   xAxis: {
+    ..._charts.commonChartOptions.xAxis,
     labels: {
       style: _typography.formLabelSmall
     },

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

@@ -27,6 +27,7 @@ export const getLineChartOptions = (): ChartOptions => ({
     symbolWidth: 18,
   },
   xAxis: {
+    ...commonChartOptions.xAxis,
     labels: {
       style: formLabelSmall,
     },

package/lib/utils/charts/spiderChart.js

@@ -29,10 +29,12 @@ const getSpiderChartOptions = () => ({
     margin: [0, 0, 0, 0]
   },
   xAxis: {
+    ..._charts.commonChartOptions.xAxis,
     labels: {
       style: bodySmallSecondary
     },
-    lineWidth: 0
+    lineWidth: 0,
+    tickmarkPlacement: 'on'
   },
   yAxis: {
     labels: {

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

@@ -1,28 +1,13 @@
 // @flow strict
 
 import {colorTextSecondary} from '../../styles/variables/_color';
-import type {
-  AxisOptions,
-  ChartOptions,
-  LegendOptionsType,
-  SeriesOptionsType,
-} from '../../types/charts';
+import type {ChartOptions} from '../../types/charts';
 
 import {commonChartOptions} from './charts';
-import { rightLineLegendColumn} from './helpers';
+import {rightLineLegendColumn} from './helpers';
 import {bodySmall} from './typography';
 
 
-type SpiderChartPropsType = {
-  ...ChartOptions,
-  chart: ChartOptions,
-  xAxis: AxisOptions,
-  yAxis: AxisOptions,
-  series?: Array<SeriesOptionsType>,
-  legend?: LegendOptionsType,
-  ...
-};
-
 export const bodySmallSecondary = {
   ...bodySmall,
   color: colorTextSecondary,
@@ -43,10 +28,12 @@ export const getSpiderChartOptions = (): ChartOptions => ({
     margin: [0, 0, 0, 0],
   },
   xAxis: {
+    ...commonChartOptions.xAxis,
     labels: {
       style: bodySmallSecondary,
     },
     lineWidth: 0,
+    tickmarkPlacement: 'on',
   },
   yAxis: {
     labels: {

package/lib/utils/charts/typography.js

@@ -10,7 +10,6 @@ var _font = require("../../styles/variables/_font");
 const baseType = {
   fontFamily: 'Centra No 2',
   fontStyle: 'normal',
-  lineHeight: _font.fontLineHeight120,
   margin: 0,
   color: _color.colorTextPrimary,
   letterSpacing: _font.fontLetterSpacing0,
@@ -30,7 +29,6 @@ const bodySmall = {
   ...baseType,
   fontSize: _font.fontSize12,
   fontWeight: _font.fontWeightBook,
-  lineHeight: _font.fontLineHeight130,
   letterSpacing: _font.fontLetterSpacing4
 };
 exports.bodySmall = bodySmall;
@@ -43,7 +41,8 @@ exports.formLabelSmall = formLabelSmall;
 const buttonTextExtraSmall = {
   ...baseType,
   fontSize: _font.fontSize12,
-  letterSpacing: _font.fontLetterSpacing1
+  letterSpacing: _font.fontLetterSpacing1,
+  lineHeight: _font.fontLineHeight120
 };
 exports.buttonTextExtraSmall = buttonTextExtraSmall;
 const underline = {

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

@@ -7,7 +7,6 @@ import {
   fontLetterSpacingMinus3,
   fontLineHeight100,
   fontLineHeight120,
-  fontLineHeight130,
   fontLineHeight140,
   fontSize12,
   fontSize36,
@@ -19,7 +18,6 @@ import {
 export const baseType = {
   fontFamily: 'Centra No 2',
   fontStyle: 'normal',
-  lineHeight: fontLineHeight120,
   margin: 0,
   color: colorTextPrimary,
   letterSpacing: fontLetterSpacing0,
@@ -39,7 +37,6 @@ export const bodySmall = {
   ...baseType,
   fontSize: fontSize12,
   fontWeight: fontWeightBook,
-  lineHeight: fontLineHeight130,
   letterSpacing: fontLetterSpacing4,
 };
 
@@ -53,6 +50,7 @@ export const buttonTextExtraSmall = {
   ...baseType,
   fontSize: fontSize12,
   letterSpacing: fontLetterSpacing1,
+  lineHeight: fontLineHeight120,
 };
 
 export const underline = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.91",
+  "version": "0.1.93-beta.0",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -49,6 +49,7 @@
     "highcharts": "^11.4.1",
     "highcharts-react-official": "^3.2.1",
     "lodash": "^4.17.21",
+    "moment-timezone": "^0.5.45",
     "react-dropzone": "^14.2.3"
   },
   "devDependencies": {