add yAxisType option to TimeSeriesWidgetUI

CartoDB · Apr 9, 2024 · acff72b · acff72b
1 parent dbe7924
commit acff72b
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 26 deletions.
diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js
@@ -18,6 +18,7 @@ import TimeSeriesLayout from './components/TimeSeriesLayout';
 import ChartLegend from '../ChartLegend';
 import { findItemIndexByTime, getDate } from './utils/utilities';
 import useSkeleton from '../useSkeleton';
+
 function TimeSeriesWidgetUI({
   data,
   categories,
@@ -46,7 +47,8 @@ function TimeSeriesWidgetUI({
   onStop,
   isLoading,
   palette,
-  showLegend
+  showLegend,
+  yAxisType
 }) {
   let prevEmittedTimeWindow = useRef();
   const intl = useIntl();
@@ -122,6 +124,7 @@ function TimeSeriesWidgetUI({
         selectedCategories={selectedCategories}
         timelinePosition={timelinePosition}
         onSelectedCategoriesChange={onSelectedCategoriesChange}
+        yAxisType={yAxisType}
       />
     </TimeSeriesProvider>
   );
@@ -160,7 +163,8 @@ TimeSeriesWidgetUI.propTypes = {
   isLoading: PropTypes.bool,
   palette: PropTypes.arrayOf(PropTypes.string),
   showLegend: PropTypes.bool,
-  intl: PropTypes.object
+  intl: PropTypes.object,
+  yAxisType: PropTypes.oneOf(['dense', 'full'])
 };
 
 TimeSeriesWidgetUI.defaultProps = {
@@ -175,7 +179,8 @@ TimeSeriesWidgetUI.defaultProps = {
   isPaused: false,
   showControls: true,
   isLoading: false,
-  palette: Object.values(commonPalette.qualitative.bold)
+  palette: Object.values(commonPalette.qualitative.bold),
+  yAxisType: 'dense'
 };
 
 export default TimeSeriesWidgetUI;
@@ -201,7 +206,8 @@ function TimeSeriesWidgetUIContent({
   selectedCategories,
   onSelectedCategoriesChange,
   showLegend,
-  timelinePosition
+  timelinePosition,
+  yAxisType = 'dense'
 }) {
   const theme = useTheme();
   const fallbackColor = theme.palette.secondary.main;
@@ -377,6 +383,7 @@ function TimeSeriesWidgetUIContent({
       filterable={filterable}
       selectedCategories={selectedCategories}
       onCategoryClick={onSelectedCategoriesChange && handleCategoryClick}
+      yAxisType={yAxisType}
     />
   );
 

diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js
@@ -25,7 +25,8 @@ export default function TimeSeriesChart({
   animation,
   filterable,
   selectedCategories,
-  onCategoryClick
+  onCategoryClick,
+  yAxisType = 'dense'
 }) {
   const theme = useTheme();
   const [echartsInstance, setEchartInstance] = useState();
@@ -71,8 +72,30 @@ export default function TimeSeriesChart({
     [theme, tooltip, tooltipFormatter]
   );
 
-  const axisOptions = useMemo(
-    () => ({
+  const axisOptions = useMemo(() => {
+    const denseAxisConfig = {
+      margin: 0,
+      verticalAlign: 'bottom',
+      padding: [0, 0, theme.spacingValue * 1.25, 0],
+      inside: true,
+      color: (value) => {
+        // FIXME: Workaround to show only maxlabel
+        let col = 'transparent';
+        if (value >= maxValue) {
+          col = theme.palette.black[60];
+        }
+        return col;
+      }
+    };
+    const fullAxisConfig = {
+      margin: 0,
+      verticalAlign: 'middle',
+      padding: [0, theme.spacingValue * 0.75, 0, 0],
+      color: theme.palette.black[60]
+    };
+    const yAxisLabelConfig = yAxisType === 'dense' ? denseAxisConfig : fullAxisConfig;
+
+    return {
       axisPointer: {
         lineStyle: {
           color: theme.palette.black[40]
@@ -124,24 +147,17 @@ export default function TimeSeriesChart({
       yAxis: {
         type: 'value',
         axisLabel: {
-          margin: 0,
-          verticalAlign: 'bottom',
-          padding: [0, 0, theme.spacingValue * 1.25, 0],
           show: true,
           showMaxLabel: true,
           showMinLabel: false,
-          inside: true,
-          color: (value) => {
-            // FIXME: Workaround to show only maxlabel
-            let col = 'transparent';
-            if (value >= maxValue) {
-              col = theme.palette.black[60];
-            }
-
-            return col;
-          },
+          ...yAxisLabelConfig,
           ...(formatter ? { formatter: (v) => formatter(v) } : {}),
-          ...theme.typography.overlineDelicate
+          fontWeight: theme.typography.fontWeightRegular,
+          fontSize: theme.typography.overlineDelicate.fontSize,
+          fontFamily: theme.typography.overlineDelicate.fontFamily,
+          // echarts doesn't intepret lineHeight properly, so hack it around
+          lineHeight: theme.typography.overlineDelicate.lineHeight * 8,
+          letterSpacing: theme.typography.overlineDelicate.letterSpacing
         },
         axisLine: {
           show: false
@@ -158,9 +174,8 @@ export default function TimeSeriesChart({
         },
         max: maxValue
       }
-    }),
-    [theme, maxValue, formatter, width, timeAxisSplitNumber]
-  );
+    };
+  }, [theme, maxValue, formatter, width, timeAxisSplitNumber, yAxisType]);
 
   const { timelineOptions: markLine, timeWindowOptions: markArea } =
     useTimeSeriesInteractivity({
@@ -210,7 +225,7 @@ export default function TimeSeriesChart({
   const options = useMemo(
     () => ({
       grid: {
-        left: theme.spacingValue * 2,
+        left: theme.spacingValue * (yAxisType === 'dense' ? 2 : 3.5),
         top: theme.spacingValue * 4,
         right: theme.spacingValue * 2,
         bottom: theme.spacingValue * 3
@@ -223,6 +238,7 @@ export default function TimeSeriesChart({
     [
       axisOptions,
       seriesOptions,
+      yAxisType,
       theme.palette.secondary.main,
       theme.spacingValue,
       tooltipOptions

diff --git a/packages/react-widgets/src/widgets/TimeSeriesWidget.js b/packages/react-widgets/src/widgets/TimeSeriesWidget.js
@@ -85,6 +85,7 @@ const debounceTimeout = 250;
  * @param  {string[]=} [props.palette] - Optional palette
  * @param  {object} [props.wrapperProps] - Extra props to pass to [WrapperWidgetUI](https://storybook-react.carto.com/?path=/docs/widgets-wrapperwidgetui--default).
  * @param  {object} [props.noDataAlertProps] - Extra props to pass to [NoDataAlert]().
+ * @param  {'dense' | 'full'} [props.yAxisType='dense'] - Type of Y axis. A dense axis will show only the top value and a full axis will show them all.
 
  * Internal state
  * @param  {boolean} [props.isPlaying] - If true, the animation starts.
@@ -138,6 +139,7 @@ function TimeSeriesWidget({
   onStateChange,
   palette,
   showLegend,
+  yAxisType,
   // Both
   stepSize,
   stepMultiplier,
@@ -472,6 +474,7 @@ function TimeSeriesWidget({
               isLoading={isLoading}
               palette={palette}
               showLegend={showLegend}
+              yAxisType={yAxisType}
             />
           )}
         </WidgetWithAlert>
@@ -541,6 +544,7 @@ TimeSeriesWidget.propTypes = {
   onTimeWindowUpdate: PropTypes.func,
   showControls: PropTypes.bool,
   chartType: PropTypes.oneOf(Object.values(TIME_SERIES_CHART_TYPES)),
+  yAxisType: PropTypes.oneOf(['dense', 'full']),
   // Both
   stepSize: PropTypes.oneOf(Object.values(GroupDateTypes)).isRequired
 };
@@ -560,7 +564,8 @@ TimeSeriesWidget.defaultProps = {
   isPaused: false,
   timeWindow: [],
   showControls: true,
-  chartType: TIME_SERIES_CHART_TYPES.LINE
+  chartType: TIME_SERIES_CHART_TYPES.LINE,
+  yAxisType: 'dense'
 };
 
 export default TimeSeriesWidget;