viz colors

docs/configuration-customizations.md

@@ -8,9 +8,62 @@ layout: page
 
 You can define a `customization:` section in the config to configure some aspects of the look and feel of Turnilo.
 
-## Visual
+## Theming Turnilo
 
-Can customize the header background color and logo icon by supplying a color string and SVG string respectively.
+Turnilo allows you to customize colors of user interface. You should keep in sync values in all subsections here. 
+For example brand CSS variable should match main visualization color.
+
+### CSS Variables
+
+Turnilo allows you to override CSS variables to apply your own theming
+
+For example:
+
+```yaml
+customization:
+  cssVariables:
+    brand: '#829aa3;'
+    item-dimension: '#f2cee0;'
+    item-dimension-text: white;
+    item-measure: '#cef2e0;'
+    item-measure-text: white;
+    background-brand: white;
+    background-brand-text: '#999;'
+    background-base: '#fbfbfb;'
+```
+
+### Visualisation colors
+
+Turnilo allows you to override colors for charts to apply your own theming. Default values for each field are defined in [colors.ts](https://github.com/allegro/turnilo/blob/master/src/common/models/colors/colors.ts). 
+
+* `main` property is used for drawing marks (lines, bars, points etc.) whenever Turnilo draws single series.
+
+* `series` is an array of colors used for drawing different series marks. For example line chart with two splits will use `series` colors to distinguish different values from second split.
+
+For example, we can override main color and use [Tableu10](https://www.tableau.com/blog/colors-upgrade-tableau-10-56782) color scheme for series:
+
+```yaml
+customizaiton:
+  visualizationColors: 
+    main: #829aa3
+    series:
+      - #4e79a7
+      - #f28e2c
+      - #e15759
+      - #76b7b2
+      - #59a14f
+      - #edc949
+      - #af7aa1
+      - #ff9da7
+      - #9c755f
+      - #bab0ab
+```
+
+By default, Turnilo uses 10 different colors for series. But it is possible to define more and Turnilo will adjust necessary split limits.
+
+### Logo
+
+Turnilo allows you to set custom customize logo icon by supplying an SVG string respectively.
 
 ```yaml
 customization:
@@ -20,8 +73,15 @@ customization:
         xmlns:xlink="http://www.w3.org/1999/xlink">
         <rect width="100%" height="100%" fill="green" />
       </svg>
+```
+
+### Header color
 
-    headerBackground: '#2D95CA'
+Turnilo allows you to set custom header background color supplying a string with CSS color.
+
+```yaml
+customization:
+  headerBackground: '#2D95CA'
 ```
 
 ## Url Shortener
@@ -30,7 +90,6 @@ Turnilo supports url shorteners for generating short links for current view defi
 Function will receive three arguments, `request` - [node request module](https://github.com/request/request-promise-native), `url` with current hash, and `context` which includes: `clientIp` (the ip of the original client, considering a possible XFF header). Function should return Promise with shortened url as string inside.
 
 
-
 For example:
 
 ```yaml
@@ -39,25 +98,6 @@ customization:
     return request.get('http://tinyurl.com/api-create.php?url=' + encodeURIComponent(url))
 ```
 
-## CSS Variables
-
-Turnilo allows you to override CSS variables to apply your own theming
-
-For example:
-
-```yaml
-customization:
-  cssVariables:
-    brand: '#829aa3;'
-    item-dimension: '#f2cee0;'
-    item-dimension-text: white;
-    item-measure: '#cef2e0;'
-    item-measure-text: white;
-    background-brand: white;
-    background-brand-text: '#999;'
-    background-base: '#fbfbfb;'
-```
-
 ## External links
 
 Turnilo supports defining external view links with access to `dataCube`, `filter`, `splits`, and `timezone` objects at link generation time.

src/client/applications/turnilo-application/turnilo-application.tsx

@@ -16,8 +16,10 @@
  */
 
 import { NamedArray } from "immutable-class";
+import memoizeOne from "memoize-one";
 import React from "react";
 import { ClientAppSettings } from "../../../common/models/app-settings/app-settings";
+import { ClientCustomization } from "../../../common/models/customization/customization";
 import { ClientDataCube } from "../../../common/models/data-cube/data-cube";
 import { Essence } from "../../../common/models/essence/essence";
 import { isEnabled as isOAuthEnabled } from "../../../common/models/oauth/oauth";
@@ -34,6 +36,7 @@ import { Ajax } from "../../utils/ajax/ajax";
 import { reportError } from "../../utils/error-reporter/error-reporter";
 import { replaceHash } from "../../utils/url/url";
 import { CubeView } from "../../views/cube-view/cube-view";
+import { SettingsContext, SettingsContextValue } from "../../views/cube-view/settings-context";
 import { GeneralError } from "../../views/error-view/general-error";
 import { HomeView } from "../../views/home-view/home-view";
 import "./turnilo-application.scss";
@@ -226,13 +229,23 @@ export class TurniloApplication extends React.Component<TurniloApplicationProps,
     }
   }
 
+  private getSettingsContext(): SettingsContextValue {
+    const { appSettings: { customization } } = this.props;
+    return this.constructSettingsContext(customization);
+  }
+
+  // NOTE: is memoization needed?
+  private constructSettingsContext = memoizeOne((customization: ClientCustomization) => ({ customization }));
+
   render() {
     return <React.StrictMode>
       <main className="turnilo-application">
-        {this.renderView()}
-        {this.renderAboutModal()}
-        <Notifications/>
-        <Questions/>
+        <SettingsContext.Provider value={this.getSettingsContext()}>
+          {this.renderView()}
+          {this.renderAboutModal()}
+          <Notifications/>
+          <Questions/>
+        </SettingsContext.Provider>
       </main>
     </React.StrictMode>;
   }

src/client/components/header-bar/header-bar.tsx

@@ -16,16 +16,16 @@
  */
 
 import React from "react";
-import { ClientCustomization } from "../../../common/models/customization/customization";
+import { useSettingsContext } from "../../views/cube-view/settings-context";
 import "./header-bar.scss";
 
 export interface HeaderBarProps {
-  customization?: ClientCustomization;
   title?: string;
 }
 
 export const HeaderBar: React.FunctionComponent<HeaderBarProps> = props => {
-  const { customization, title } = props;
+  const { title } = props;
+  const { customization } = useSettingsContext();
 
   const headerStyle: React.CSSProperties = customization && customization.headerBackground && { background: customization.headerBackground };
 

src/client/deserializers/app-settings.ts

@@ -26,3 +26,29 @@ export function deserialize({ oauth, clientTimeout, customization, version }: Se
     oauth: deserializeOauth(oauth)
   };
 }
+
+/*
+ NOTE: Function is used only for serialize-deserialize cycle in Essence class.
+ Now it's hard to remove that functionality but in the end, Essence does not need to serialize itself.
+*/
+export function serialize(appSettings: ClientAppSettings): SerializedAppSettings {
+  const { clientTimeout, version, customization, oauth } = appSettings;
+  const { visualizationColors, messages, customLogoSvg, hasUrlShortener, locale, headerBackground, sentryDSN, timezones, externalViews } = customization;
+
+  return {
+    clientTimeout,
+    version,
+    oauth,
+    customization: {
+      visualizationColors,
+      messages,
+      customLogoSvg,
+      locale,
+      hasUrlShortener,
+      headerBackground,
+      sentryDSN,
+      timezones: timezones.map(t => t.toJS()),
+      externalViews
+    }
+  };
+}

src/client/deserializers/customization.ts

@@ -19,7 +19,7 @@ import { ClientCustomization, SerializedCustomization } from "../../common/model
 import { deserialize as deserializeLocale } from "../../common/models/locale/locale";
 
 export function deserialize(customization: SerializedCustomization): ClientCustomization {
-  const { headerBackground, messages, locale, customLogoSvg, timezones, externalViews, hasUrlShortener, sentryDSN } = customization;
+  const { headerBackground, messages, locale, customLogoSvg, timezones, externalViews, hasUrlShortener, sentryDSN, visualizationColors } = customization;
   return {
     headerBackground,
     customLogoSvg,
@@ -28,6 +28,7 @@ export function deserialize(customization: SerializedCustomization): ClientCusto
     sentryDSN,
     messages,
     locale: deserializeLocale(locale),
-    timezones: timezones.map(Timezone.fromJS)
+    timezones: timezones.map(Timezone.fromJS),
+    visualizationColors
   };
 }

src/client/utils/styles/_variables.scss

@@ -75,8 +75,6 @@ $theme-colors: (
   item-measure-hover: darken($item-measure, 6%),
   item-measure-text: $text-standard,
   item-measure: $item-measure,
-  main-time-area: rgba($brand, 0.14),
-  main-time-line: $brand,
   negative: #e14040,
   pinboard-icon: darken($background-base, 5%),
   positive: #08b157,

src/client/views/cube-view/cube-view.tsx

@@ -92,7 +92,7 @@ export interface CubeViewProps {
   hash: string;
   changeCubeAndEssence: Ternary<ClientDataCube, Essence, boolean, void>;
   urlForCubeAndEssence: Binary<ClientDataCube, Essence, string>;
-  getEssenceFromHash: Binary<string, ClientDataCube, Essence>;
+  getEssenceFromHash: Ternary<string, ClientAppSettings, ClientDataCube, Essence>;
   dataCube: ClientDataCube;
   dataCubes: ClientDataCube[];
   openAboutModal: Fn;
@@ -292,7 +292,8 @@ export class CubeView extends React.Component<CubeViewProps, CubeViewState> {
   }
 
   getEssenceFromDataCube(dataCube: ClientDataCube): Essence {
-    return Essence.fromDataCube(dataCube);
+    const { appSettings } = this.props;
+    return Essence.fromDataCube(dataCube, appSettings);
   }
 
   getEssenceFromHash(hash: string, dataCube: ClientDataCube): Essence {
@@ -304,8 +305,8 @@ export class CubeView extends React.Component<CubeViewProps, CubeViewState> {
       throw new Error("Hash is required.");
     }
 
-    const { getEssenceFromHash } = this.props;
-    return getEssenceFromHash(hash, dataCube);
+    const { getEssenceFromHash, appSettings } = this.props;
+    return getEssenceFromHash(hash, appSettings, dataCube);
   }
 
   globalResizeListener = () => {

src/client/views/cube-view/settings-context.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2017-2022 Allegro.pl
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useContext } from "react";
+import { ClientCustomization } from "../../../common/models/customization/customization";
+
+export interface SettingsContextValue {
+  customization: ClientCustomization;
+}
+
+export const SettingsContext = React.createContext<SettingsContextValue>({
+  get customization(): ClientCustomization {
+    throw new Error("Attempted to consume SettingsContext when there was no Provider in place.");
+  }
+});
+
+export function useSettingsContext(): SettingsContextValue {
+  return useContext(SettingsContext);
+}

src/client/views/home-view/home-view.tsx

@@ -73,15 +73,12 @@ export class HomeView extends React.Component<HomeViewProps, HomeViewState> {
   }
 
   render() {
-    const { onOpenAbout, dataCubes, customization } = this.props;
+    const { onOpenAbout, dataCubes } = this.props;
     const { query } = this.state;
     const hasDataCubes = dataCubes.length > 0;
 
     return <div className="home-view">
-      <HeaderBar
-        customization={customization}
-        title={STRINGS.home}
-      >
+      <HeaderBar title={STRINGS.home}>
         <button className="text-button" onClick={onOpenAbout}>
           {STRINGS.infoAndFeedback}
         </button>

src/client/visualizations/bar-chart/bar-chart.scss

@@ -37,6 +37,7 @@
     position: absolute;
 
     .selection-highlight {
+      // TODO: replace with visualisationColors.main
       @include css-variable(border-color, brand);
       pointer-events: none;
       border-width: 1px;
@@ -113,7 +114,6 @@
         }
 
         > rect.background {
-          @include css-variable(fill, brand);
           pointer-events: none;
         }
 

src/client/visualizations/bar-chart/bar-chart.tsx

@@ -54,6 +54,7 @@ import { VisMeasureLabel } from "../../components/vis-measure-label/vis-measure-
 import { SPLIT, VIS_H_PADDING } from "../../config/constants";
 import { classNames, roundToPx } from "../../utils/dom/dom";
 import { ChartPanel, DefaultVisualizationControls, VisualizationProps } from "../../views/cube-view/center-panel/center-panel";
+import { SettingsContext, SettingsContextValue } from "../../views/cube-view/settings-context";
 import { hasHighlightOn } from "../highlight-controller/highlight-controller";
 import "./bar-chart.scss";
 import { BarCoordinates } from "./bar-coordinates";
@@ -168,13 +169,16 @@ export default function BarChartVisualization(props: VisualizationProps) {
 }
 
 class BarChart extends React.Component<ChartProps, BarChartState> {
+  static contextType = SettingsContext;
   protected className = BAR_CHART_MANIFEST.name;
 
   private coordinatesCache: BarCoordinates[][] = [];
   private scroller = React.createRef<Scroller>();
 
   state: BarChartState = this.initState();
 
+  context: SettingsContextValue;
+
   componentDidUpdate() {
     const { scrollerYPosition, scrollerXPosition } = this.state;
 
@@ -491,6 +495,7 @@ class BarChart extends React.Component<ChartProps, BarChartState> {
   ): { bars: JSX.Element[], highlight: JSX.Element } {
     const { essence } = this.props;
     const { timezone } = essence;
+    const { customization: { visualizationColors } } = this.context;
 
     const bars: JSX.Element[] = [];
     let highlight: JSX.Element;
@@ -547,6 +552,7 @@ class BarChart extends React.Component<ChartProps, BarChartState> {
             className="background"
             width={roundToPx(barWidth)}
             height={roundToPx(Math.abs(height))}
+            fill={visualizationColors.main}
             x={barOffset}
             y={roundToPx(y)}
           />

src/client/visualizations/bar-chart/improved-bar-chart/bar-chart.tsx

@@ -25,6 +25,7 @@ import { MessageCard } from "../../../components/message-card/message-card";
 import { Scroller } from "../../../components/scroller/scroller";
 import { SPLIT } from "../../../config/constants";
 import { selectMainDatum } from "../../../utils/dataset/selectors/selectors";
+import { useSettingsContext } from "../../../views/cube-view/settings-context";
 import { Highlight } from "../../highlight-controller/highlight";
 import { BarCharts } from "./bar-charts/bar-charts";
 import { InteractionController } from "./interactions/interaction-controller";
@@ -49,8 +50,9 @@ interface BarChartProps {
 }
 
 export const BarChart: React.FunctionComponent<BarChartProps> = props => {
+  const { customization } = useSettingsContext();
   const { dataset, essence, stage, highlight, acceptHighlight, dropHighlight, saveHighlight } = props;
-  const model = create(essence, dataset);
+  const model = create(essence, dataset, customization);
 
   const transposedDataset = transposeDataset(dataset, model);
   if (transposedDataset.length === 0) {