typings for TimeSeries widget

packages/react-widgets/src/types.d.ts

@@ -93,26 +93,6 @@ export type useSourceFilters =  {
   id: string,
 };
 
-export type TimeSeriesWidget = {
-  operationColumn?: string,
-  stepSize: string,
-  stepSizeOptions?: string[],
-  chartType?: string,
-  tooltip?: boolean,
-  tooltipFormatter?: Function,
-  formatter?: Function,
-  height?: string,
-  showControls?: boolean,
-  isPlaying?: boolean,
-  isPaused?: boolean,
-  timeWindow?: any[],
-  onPlay?: Function,
-  onPause?: Function,
-  onStop?: Function,
-  onTimelineUpdate?: Function,
-  onTimeWindowUpdate?: Function
-} & CommonWidgetProps & MonoColumnWidgetProps;
-
 export type LegendWidget = {
   initialCollapsed?: boolean;
   customLegendTypes?: Record<string, Function>;

packages/react-widgets/src/widgets/TimeSeriesWidget.d.ts

@@ -0,0 +1,45 @@
+import { AggregationTypes, GroupDateTypes } from '@carto/react-core';
+import { CommonWidgetProps, MonoColumnWidgetProps } from '../types';
+
+export interface TimeseriesWidgetSerie {
+  operation: AggregationTypes;
+  operationColumn: string;
+}
+
+export type TimeSeriesWidgetProps = {
+  operationColumn?: string;
+  series?: TimeseriesWidgetSerie[];
+
+  stepSize: GroupDateTypes;
+  stepMultiplier?: number;
+  stepSizeOptions?: string[];
+
+  splitByCategory?: string;
+  splitByCategoryLimit?: number;
+  splitByCategoryValues?: string[];
+
+  chartType?: string;
+  tooltip?: boolean;
+  tooltipFormatter?: Function;
+  formatter?: Function;
+
+  height?: string;
+  fitHeihgt?: boolean;
+  stableHeight?: boolean;
+  showControls?: boolean;
+  showLegend?: boolean;
+
+  isPlaying?: boolean;
+  isPaused?: boolean;
+  timeWindow?: number[];
+
+  onPlay?: () => void;
+  onPause?: () => void;
+  onStop?: () => void;
+  onTimelineUpdate?: (position: number) => void;
+  onTimeWindowUpdate?: (timeWindow: [number, number]) => void;
+} & CommonWidgetProps &
+  MonoColumnWidgetProps;
+
+declare const TimeSeriesWidget: (props: TimeSeriesWidgetProps) => JSX.Element;
+export default TimeSeriesWidget;

packages/react-widgets/src/widgets/TimeSeriesWidget.js

@@ -61,9 +61,9 @@ const EMPTY_ARRAY = [];
  * @param  {object[]=} [props.series] - Array of {operation, operationColumn} objects that specify multiple aggregations
  * @param  {string} props.stepSize - Step applied to group the data. Must be one of those defined in `GroupDateTypes` object.
  * @param  {number=} [props.stepMultiplier] - Multiplier applied to `stepSize`. Use to aggregate by 2 hours, 5 seconds, etc.
- * @param  {string=} props.splitByCategory
- * @param  {string=} props.splitByCategoryLimit
- * @param  {string=} props.splitByCategoryValues
+ * @param  {string=} [props.splitByCategory] - Name of the data source's column to split the data by category.
+ * @param  {string=} [props.splitByCategoryLimit] - Limit of categories shown.  categories to show. Default: 5
+ * @param  {string=} [props.splitByCategoryValues]  - Select specific categories. Default most dominant categories are selected.
  * @param  {string[]} [props.stepSizeOptions] - Different steps that can be applied to group the data. If filled, an icon with a menu appears to change between steps. Every value must be one of those defined in `AggregationTypes` object.
  * @param  {string} [props.chartType] - Chart used to represent the time serie. Must be one of those defined in `TIME_SERIES_CHART_TYPES` object.
  * @param  {boolean} [props.tooltip] - Enable/disable tooltip.