[feat] Implemented ability to invert time series trend colors (#2692)

- Pass through properties to invert time series trend colors

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

src/components/src/common/range-plot.tsx

@@ -35,6 +35,8 @@ interface RangePlotProps {
   animationWindow?: string;
   filter?: Filter;
   datasets?: Datasets;
+
+  invertTrendColor?: boolean;
 }
 
 RangePlotFactory.deps = [RangeBrushFactory, HistogramPlotFactory, LineChartFactory];

src/components/src/common/range-slider.tsx

@@ -69,6 +69,8 @@ interface RangeSliderProps {
   animationWindow?: string;
   filter?: Filter;
   datasets?: Datasets;
+
+  invertTrendColor?: boolean;
 }
 
 RangeSliderFactory.deps = [RangePlotFactory];
@@ -211,6 +213,7 @@ export default function RangeSliderFactory(
         showInput,
         histogram,
         lineChart,
+        invertTrendColor,
         range,
         onChange = noop,
         sliderHandleWidth,
@@ -238,6 +241,7 @@ export default function RangeSliderFactory(
                 <RangePlot
                   histogram={histogram}
                   lineChart={this.props.lineChart}
+                  invertTrendColor={invertTrendColor}
                   plotType={this.props.plotType}
                   isEnlarged={this.props.isEnlarged}
                   onBrush={(val0, val1) => onChange([val0, val1])}

src/components/src/common/time-range-slider.tsx

@@ -40,6 +40,7 @@ type TimeRangeSliderProps = {
   setFilterAnimationWindow?: (id: string) => void;
   onChange: (v: number[]) => void;
   timeline: Timeline;
+  invertTrendColor?: boolean;
 };
 
 const StyledSliderContainer = styled.div<StyledSliderContainerProps>`
@@ -89,6 +90,7 @@ export default function TimeRangeSliderFactory(
       histogram,
       plotType,
       lineChart,
+      invertTrendColor,
       step,
       isAnimatable,
       speed,
@@ -130,6 +132,7 @@ export default function TimeRangeSliderFactory(
                 value1={value[1]}
                 histogram={histogram}
                 lineChart={lineChart}
+                invertTrendColor={invertTrendColor}
                 plotType={plotType}
                 isEnlarged={isEnlarged}
                 showInput={false}

src/schemas/src/vis-state-schema.ts

@@ -828,7 +828,9 @@ export const filterPropsV1 = {
   layerId: null,
   speed: null,
 
-  enabled: null
+  enabled: null,
+
+  invertTrendColor: null
 };
 
 export const propertiesV0 = {

src/types/reducers.d.ts

@@ -148,6 +148,7 @@ export type TimeRangeFilter = FilterBase<LineChart> &
       [key: string]: any;
     };
     animationWindow: string;
+    invertTrendColor: boolean;
   };
 
 export type PolygonFilter = FilterBase<LineChart> & {
@@ -520,11 +521,11 @@ export type TypedTimeRangeFilter = FilterBaseOmitRedudant &
     fieldType: 'timestamp';
     fixedDomain: true;
     value: [number, number];
-    bins?: object;
     plotType: {
       [key: string]: any;
     };
     animationWindow: string;
+    invertTrendColor: boolean;
   };
 
 export type TypedPolygonFilter = FilterBaseOmitRedudant & {

src/utils/src/data-utils.ts

@@ -294,7 +294,7 @@ export const arrayMove = <T>(array: T[], from: number, to: number): T[] => {
  * @param field
  */
 export function getFormatter(
-  format: string | Record<string, string>,
+  format: string | Record<string, string> | null,
   field?: Field
 ): FieldFormatter {
   if (!format) {

src/utils/src/dataset-utils.ts

@@ -573,7 +573,7 @@ export function analyzerTypeToFieldType(aType: string): string {
 
 const TIME_DISPLAY = '2020-05-11 14:00';
 
-const addTimeLabel = (formats: TimeLabelFormat[]) =>
+export const addTimeLabel = (formats: TimeLabelFormat[]) =>
   formats.map(f => ({
     ...f,
     label:
@@ -590,7 +590,7 @@ export function getFieldFormatLabels(fieldType?: string): TooltipFormat[] {
   return addTimeLabel(formatLabels);
 }
 
-export function getFormatLabels(fields: TooltipFields[], fieldName: string): TooltipFormat[] {
+export const getFormatLabels = (fields: TooltipFields[], fieldName: string): TooltipFormat[] => {
   const fieldType = fields.find(f => f.name === fieldName)?.type;
   return getFieldFormatLabels(fieldType);
-}
+};

src/utils/src/format.ts

@@ -2,5 +2,6 @@
 // Copyright contributors to the kepler.gl project
 
 import {TOOLTIP_KEY} from '@kepler.gl/constants';
+import {TimeLabelFormat} from '@kepler.gl/types';
 
-export const getFormatValue = fmt => fmt[TOOLTIP_KEY];
+export const getFormatValue = (fmt: TimeLabelFormat): string | null => fmt[TOOLTIP_KEY];