@redsift/dashboard 7.0.1 → 7.1.0

package/index.d.ts

@@ -151,12 +151,12 @@ interface LocaleText$2 {
  * Component props.
  */
 interface HorizontalBarChartProps extends ComponentProps<'div'> {
+    /** Whether the x axis labels are rotated or not. */
+    areXLabelsRotated?: boolean;
     /** Number of categories to use, the rest being put into a new category called "Others". */
     caping?: number;
     /** Caption. */
     caption?: string;
-    /** Whether the x axis labels are rotated or not. */
-    areXLabelsRotated?: boolean;
     /** Dataset to use to generate the chart, if no context is provided. */
     data?: JSONArray;
     /** Which datagrid column the chart is filtering and using which operation. */

package/index.js

@@ -1,4 +1,4 @@
-import { ColorTheme, getColorScale, scheme, PieChartLabelVariant, PieChartSize, PieChartTheme, PieChartVariant, StyledPieChartTitle, StyledPieChartCenterText, StyledPieChartLabel, StyledPieChartCaption } from '@redsift/charts';
+import { ColorTheme, getColorScale, scheme, StyledHorizontalBarChartTitle, StyledHorizontalBarChartCaption, PieChartLabelVariant, PieChartSize, PieChartTheme, PieChartVariant, StyledPieChartTitle, StyledPieChartCenterText, StyledPieChartLabel, StyledPieChartCaption } from '@redsift/charts';
 export { ColorTheme, PieChartLabelVariant, PieChartSize, PieChartTheme, PieChartVariant } from '@redsift/charts';
 import React, { useContext, useMemo, useState, useLayoutEffect, useRef, useCallback, useEffect, forwardRef, useReducer, useId } from 'react';
 import styled, { css } from 'styled-components';
@@ -4073,22 +4073,6 @@ const StyledHorizontalBarChart = styled.div`
     }
   }
 `;
-const StyledHorizontalBarChartTitle = styled.div`
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  font-family: var(--redsift-typography-h4-font-family);
-  font-size: var(--redsift-typography-h4-font-size);
-  font-weight: var(--redsift-typography-h4-font-weight);
-  gap: 16px;
-  line-height: var(--redsift-typography-h4-line-height);
-`;
-const StyledHorizontalBarChartCaption = styled.p`
-  font-family: var(--redsift-typography-caption-font-family);
-  font-size: var(--redsift-typography-caption-font-size);
-  font-weight: var(--redsift-typography-caption-font-weight);
-  line-height: var(--redsift-typography-caption-line-height);
-`;
 const StyledHorizontalBarChartContainer = styled.div`
   display: flex;
   align-items: center;
@@ -4315,7 +4299,8 @@ const HorizontalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     ndx = crossfilter(data),
     dispatch,
-    state
+    state,
+    data: contextData
   } = useContext(DashboardContext);
   const {
     tableFilters
@@ -4394,7 +4379,7 @@ const HorizontalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       setDimensions(computedDimension);
       setGroups(computedGroup);
     }
-  }, []);
+  }, [data, contextData]);
 
   // Filter chart if context is updated by an external component.
   const filter = datagridFilter ? tableFilters.find(filter => filter.columnField === datagridFilter.field && filter.operatorValue === datagridFilter.operator) : null;
@@ -7719,7 +7704,8 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     ndx = crossfilter(data),
     dispatch,
-    state
+    state,
+    data: contextData
   } = useContext(DashboardContext);
   const {
     tableFilters
@@ -7784,7 +7770,7 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
       setDimensions(computedDimension);
       setGroups(computedGroup);
     }
-  }, []);
+  }, [data, contextData]);
 
   // Filter chart if context is updated by an external component.
   const filter = datagridFilter ? tableFilters.find(filter => filter.columnField === datagridFilter.field && filter.operatorValue === datagridFilter.operator) : null;
@@ -8124,7 +8110,8 @@ const TimeSeriesBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     ndx = crossfilter(data),
     dispatch,
-    state
+    state,
+    data: contextData
   } = useContext(DashboardContext);
   const {
     tableFilters
@@ -8263,7 +8250,7 @@ const TimeSeriesBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       // Store chart for further use.
       setChart(barChart$1);
     }
-  }, []);
+  }, [data, contextData]);
 
   // Filter chart if context is updated by an external component.
   const filterStart = tableFilters.find(filter => filter.columnField === columnToFilter && filter.operatorValue === 'after');