geosolutions-it · allyoucanmap · Nov 27, 2023 · Nov 3, 2023 · Nov 3, 2023 · Nov 3, 2023
diff --git a/web/client/components/charts/WidgetChart.jsx b/web/client/components/charts/WidgetChart.jsx
@@ -17,7 +17,8 @@ import {
     legacyChartToChartWithTraces,
     parseNumber,
     parsePieNoAggregationFunctionData,
-    enableBarChartStack
+    enableBarChartStack,
+    FONT
 } from '../../utils/WidgetsUtils';
 
 const Plot = React.lazy(() => import('./PlotlyChart'));
@@ -76,6 +77,7 @@ const chartDataTypes = {
         name: traceName,
         classifyGeoJSON,
         textinfo,
+        layout = {},
         tickPrefix,
         format,
         tickSuffix,
@@ -161,6 +163,13 @@ const chartDataTypes = {
                             text: classificationDataKey === valueDataKey ? classificationDataKey : `${valueDataKey} | ${classificationDataKey}`
                         },
                         hovertemplate: `%{label}<br>${classificationDataKey}<br>%{value}<br>%{percent}<extra></extra>`,
+                        hoverlabel: {
+                            font: {
+                                color: layout.color || FONT.COLOR,
+                                family: layout.fontFamily || FONT.FAMILY,
+                                size: layout.fontSize || FONT.SIZE
+                            }
+                        },
                         domain: {
                             x: [0.2, 0.8],
                             y: [0.2, 0.8]
@@ -181,6 +190,13 @@ const chartDataTypes = {
                 legendgrouptitle: {
                     text: name
                 },
+                hoverlabel: {
+                    font: {
+                        color: layout?.color || FONT.COLOR,
+                        family: layout?.fontFamily || FONT.FAMILY,
+                        size: layout?.fontSize || FONT.SIZE
+                    }
+                },
                 hovertemplate: `%{label}<br>${valueDataKey}<br>${tickPrefix ?? ""}%{value${format ? `:${format}` : ''}}${tickSuffix ?? ""}<br>%{percent}<extra></extra>`,
                 domain,
                 labels: outerLabels,
@@ -324,6 +340,7 @@ const getData = ({
     name,
     classifyGeoJSONSync,
     textinfo,
+    layout,
     tickPrefix,
     format,
     tickSuffix,
@@ -344,6 +361,7 @@ const getData = ({
         yAxisOpts,
         xAxisOpts,
         textinfo,
+        layout,
         tickPrefix,
         format,
         tickSuffix,
@@ -371,6 +389,7 @@ function getLayoutOptions({
     xAxisOpts = [],
     yAxisOpts = [],
     barChartType,
+    layout = {},
     height,
     width
 }) {
@@ -385,7 +404,6 @@ function getLayoutOptions({
     const bottom = bottomPx === 0 ? 0 : bottomPx / height;
     const top = topPX === 0 ? 1 : 1 - (topPX / height);
 
-    const defaultFontSize = 12;
 
     const yAxises = (yAxisOpts).reduce((acc, options, idx) => {
         return {
@@ -397,7 +415,7 @@ function getLayoutOptions({
                 showticklabels: !options.hide,
                 nticks: options.nTicks, // max number of ticks, to avoid performance issues
                 showgrid: cartesian,
-                color: options.color,
+                color: options.color || layout.color,
                 side: options.side,
                 anchor: options.anchor || 'x',
                 ...(options.anchor === 'free' && {
@@ -408,11 +426,13 @@ function getLayoutOptions({
                 title: {
                     text: options.title,
                     font: {
-                        size: options.fontSize || defaultFontSize
+                        size: options.fontSize || layout.fontSize  || FONT.SIZE,
+                        family: options.fontFamily || layout.fontFamily || FONT.FAMILY
                     }
                 },
                 tickfont: {
-                    size: options.fontSize || defaultFontSize
+                    size: options.fontSize || layout.fontSize  || FONT.SIZE,
+                    family: options.fontFamily || layout.fontFamily || FONT.FAMILY
                 },
                 tickformat: options?.format,
                 tickprefix: options?.tickPrefix,
@@ -438,7 +458,7 @@ function getLayoutOptions({
                 showticklabels: !options.hide,
                 nticks: options.nTicks, // max number of ticks, to avoid performance issues
                 showgrid: cartesian,
-                color: options.color,
+                color: options.color || layout.color,
                 side: options.side,
                 anchor: options.anchor || 'y',
                 ...(options.anchor === 'free' && {
@@ -449,11 +469,13 @@ function getLayoutOptions({
                 title: {
                     text: options.title,
                     font: {
-                        size: options.fontSize || defaultFontSize
+                        size: options.fontSize || layout.fontSize  || FONT.SIZE,
+                        family: options.fontFamily || layout.fontFamily || FONT.FAMILY
                     }
                 },
                 tickfont: {
-                    size: options.fontSize || defaultFontSize
+                    size: options.fontSize || layout.fontSize  || FONT.SIZE,
+                    family: options.fontFamily || layout.fontFamily || FONT.FAMILY
                 },
 
                 ...(idx !== 0
@@ -504,7 +526,8 @@ export const toPlotly = (_props) => {
         width,
         legend,
         classifyGeoJSONSync,
-        cartesian
+        cartesian,
+        layout
     } = props;
     const isModeBarVisible = width > 350;
     const traces = props.traces || [];
@@ -534,9 +557,15 @@ export const toPlotly = (_props) => {
                 xAxisOpts,
                 yAxisOpts,
                 barChartType,
+                layout,
                 height,
                 width
             }),
+            font: {
+                color: layout?.color || FONT.COLOR,
+                size: layout?.fontSize || FONT.SIZE,
+                family: layout?.fontFamily || FONT.FAMILY
+            },
             margin: getMargins({ isModeBarVisible }),
             autosize: false,
             height,
@@ -583,6 +612,7 @@ export const toPlotly = (_props) => {
                 name,
                 classifyGeoJSONSync,
                 textinfo,
+                layout,
                 tickPrefix,
                 format,
                 tickSuffix,

diff --git a/web/client/components/widgets/builder/wizard/ChartWizard.jsx b/web/client/components/widgets/builder/wizard/ChartWizard.jsx
@@ -143,6 +143,8 @@ const ChartWizard = ({
     if (!selectedTrace) {
         return null;
     }
+    const selectedTab = selectedTrace?.type === "pie" && tab === "axis" ? "traces" : (tab);
+
     if (noAttributes) {
         return <NoAttributeComp featureTypeProperties={featureTypeProperties}/>;
     }
@@ -155,7 +157,7 @@ const ChartWizard = ({
                 onChange={onChange}
                 onAddChart={() => toggleLayerSelector(true)}
                 disableMultiChart={!dashBoardEditing}
-                tab={tab}
+                tab={selectedTab}
                 setTab={setTab}
                 hasAggregateProcess={hasAggregateProcess}
             >
@@ -230,24 +232,26 @@ const ChartWizard = ({
                     data={data}
                     onChange={onChange}
                 />
-                <ChartLayoutOptions
-                    data={data}
-                    onChange={onChange}
-                />
             </>
         ),
         axis: (
             <ChartAxisOptions
                 data={data}
                 onChange={onChange}
             />
+        ),
+        layout: (
+            <ChartLayoutOptions
+                data={data}
+                onChange={onChange}
+            />
         )
     };
 
     const ChartOptions = (
         <>
             {sampleChart}
-            {tabContents[selectedTrace?.type === 'pie' ? 'traces' : (tab || 'traces')]}
+            {tabContents[selectedTab || 'traces']}
         </>
     );
     const WidgetOptions = !noAttributes ? (

diff --git a/web/client/components/widgets/builder/wizard/CounterWizard.jsx b/web/client/components/widgets/builder/wizard/CounterWizard.jsx
@@ -37,7 +37,7 @@ const CounterOptions = compose(
     }),
     wfsChartOptions,
     noAttributes(({ options = [] }) => options.length === 0)
-)(WPSChartOptions);
+)(WPSChartOptions); // todo add a wrapper, that contains WPSChartOptions, move counter adv options in counter folder
 
 export const isCounterOptionsValid = (options = {}, { hasAggregateProcess }) => options.aggregateFunction && options.aggregationAttribute && hasAggregateProcess;
 const triggerSetValid = compose(
@@ -95,6 +95,7 @@ const CounterPreview = ({
             type={data.type}
             counterOpts={data.counterOpts}
             formula={data.formula}
+            layout={data.layout}
             legend={data.legend}
             layer={data.layer || layer}
             filter={data.filter}

diff --git a/web/client/components/widgets/builder/wizard/chart/ChartAxisOptions.jsx b/web/client/components/widgets/builder/wizard/chart/ChartAxisOptions.jsx
@@ -9,15 +9,16 @@ import React, { useState } from 'react';
 import { isNil, castArray } from 'lodash';
 import uuidv1 from "uuid/v1";
 import Select from 'react-select';
-import ColorSelector from '../../../../style/ColorSelector';
 import { FormGroup, Radio, ControlLabel, InputGroup, Checkbox, Button as ButtonRB, Glyphicon, FormControl } from 'react-bootstrap';
+
 import ChartValueFormatting from './ChartValueFormatting';
 import Message from '../../../../I18N/Message';
-
+import Font from '../common/Font';
 import InfoPopover from '../../../widget/InfoPopover';
 import tooltip from '../../../../misc/enhancers/tooltip';
 import localizedProps from '../../../../misc/enhancers/localizedProps';
 import DebouncedFormControl from '../../../../misc/DebouncedFormControl';
+import { FONT } from '../../../../../utils/WidgetsUtils';
 
 const Button = tooltip(ButtonRB);
 const AxisTypeSelect = localizedProps('options')(Select);
@@ -185,35 +186,13 @@ function AxisOptions({
                     />
                 </InputGroup>
             </FormGroup>
-            <FormGroup className="form-group-flex">
-                <ControlLabel><Message msgId={'styleeditor.color'} /></ControlLabel>
-                <InputGroup>
-                    <ColorSelector
-                        disabled={!!options.hide}
-                        format="rgb"
-                        color={options?.color || '#000000'}
-                        onChangeColor={(color) => color && handleChange('color', color)}
-                    />
-                </InputGroup>
-            </FormGroup>
-            <FormGroup className="form-group-flex">
-                <ControlLabel><Message msgId={'styleeditor.fontSize'} /></ControlLabel>
-                <InputGroup style={{ maxWidth: 90 }}>
-                    <DebouncedFormControl
-                        type="number"
-                        disabled={!!options.hide}
-                        value={options.fontSize || 12}
-                        min={1}
-                        step={1}
-                        fallbackValue={12}
-                        style={{ zIndex: 0 }}
-                        onChange={(value) => {
-                            handleChange('fontSize', value);
-                        }}
-                    />
-                    <InputGroup.Addon>px</InputGroup.Addon>
-                </InputGroup>
-            </FormGroup>
+            <Font
+                color={options?.color || chart?.layout?.color || FONT.COLOR}
+                fontSize={options?.fontSize || chart?.layout?.fontSize || FONT.SIZE}
+                fontFamily={options?.fontFamily || chart?.layout?.fontFamily || FONT.FAMILY}
+                disabled={!!options.hide}
+                onChange={handleChange}
+            />
             {!hideValueFormatting && <ChartValueFormatting
                 options={options}
                 hideFormula

diff --git a/web/client/components/widgets/builder/wizard/chart/ChartLayoutOptions.jsx b/web/client/components/widgets/builder/wizard/chart/ChartLayoutOptions.jsx
@@ -10,8 +10,10 @@ import { FormGroup, ControlLabel, InputGroup, Checkbox, Radio } from 'react-boot
 import Message from '../../../../I18N/Message';
 import {
     extractTraceData,
-    enableBarChartStack
+    enableBarChartStack,
+    FONT
 } from '../../../../../utils/WidgetsUtils';
+import Font from '../common/Font';
 
 const BAR_CHART_TYPES = [{
     id: 'stacked',
@@ -75,6 +77,17 @@ function ChartLayoutOptions({
                     ))}
                 </InputGroup>
             </FormGroup>}
+            <div className="ms-wizard-form-separator"><Message msgId="widgets.advanced.font" /></div>
+            <Font
+                options={selectedTrace.type !== 'pie' ? undefined : ["size", "family"] }
+                color={selectedChart?.layout?.color || FONT.COLOR}
+                fontSize={selectedChart?.layout?.fontSize || FONT.SIZE}
+                fontFamily={selectedChart?.layout?.fontFamily || FONT.FAMILY}
+                disabled={false}
+                onChange={(key, val) => {
+                    onChange(`${chartPath}.layout.${key}`, val);
+                }}
+            />
         </>
     );
 }

diff --git a/web/client/components/widgets/builder/wizard/chart/ChartTraceEditSelector.jsx b/web/client/components/widgets/builder/wizard/chart/ChartTraceEditSelector.jsx
@@ -9,6 +9,8 @@
 import React, { useState } from 'react';
 import { FormGroup, InputGroup, Button as ButtonRB, Glyphicon, Tabs, Tab } from 'react-bootstrap';
 import ReactSelect from 'react-select';
+import chroma from 'chroma-js';
+
 import DebouncedFormControl from '../../../../misc/DebouncedFormControl';
 import localizedProps from "../../../../misc/enhancers/localizedProps";
 import {
@@ -21,7 +23,6 @@ import {
 import { getChromaScaleByName } from '../../../../../utils/ClassificationUtils';
 import tooltip from '../../../../misc/enhancers/tooltip';
 import Message from "../../../../I18N/Message";
-import chroma from 'chroma-js';
 
 const Button = tooltip(ButtonRB);
 
@@ -202,15 +203,16 @@ function ChartTraceEditSelector({
                 </InputGroup>
             </FormGroup>}
             {children}
-            {editing && selectedTrace?.type !== 'pie' && <Tabs
+            {editing && <Tabs
                 activeKey={tab}
                 animation={false}
                 onSelect={setTab}
             >
                 <Tab key="traces" eventKey="traces" title={<Message msgId="widgets.advanced.traces" />} />
-                <Tab key="axis" eventKey="axis" title={<Message msgId="widgets.advanced.axes" />} />
+                {selectedTrace?.type !== 'pie' ? <Tab key="axis" eventKey="axis" title={<Message msgId="widgets.advanced.axes" />} /> : null}
+                <Tab key="layout" eventKey="layout" title={<Message msgId="widgets.advanced.layout" />} />
             </Tabs>}
-            {editing && (selectedTrace.type === 'pie' || tab !== 'axis') && <FormGroup validationState={error ? 'error' : ''} className="form-group-flex" style={{ marginBottom: 0, marginTop: 8 }}>
+            {editing && tab === 'traces' && <FormGroup validationState={error ? 'error' : ''} className="form-group-flex" style={{ marginBottom: 0, marginTop: 8 }}>
                 <InputGroup>
                     <div style={{ display: 'flex' }}>
                         <div style={{ minWidth: 130 }}>

diff --git a/web/client/components/widgets/builder/wizard/chart/__tests__/ChartAxisOptions-test.jsx b/web/client/components/widgets/builder/wizard/chart/__tests__/ChartAxisOptions-test.jsx
@@ -30,6 +30,7 @@ describe('ChartAxisOptions', () => {
             'widgets.advanced.yAxisType',
             'styleeditor.color',
             'styleeditor.fontSize',
+            'styleeditor.fontFamily',
             'widgets.advanced.prefix',
             'widgets.advanced.format ',
             'widgets.advanced.suffix',
@@ -39,6 +40,7 @@ describe('ChartAxisOptions', () => {
             'widgets.advanced.xAxisType',
             'styleeditor.color',
             'styleeditor.fontSize',
+            'styleeditor.fontFamily',
             'widgets.advanced.side',
             'widgets.advanced.anchor'
         ]);
@@ -79,6 +81,7 @@ describe('ChartAxisOptions', () => {
             'widgets.advanced.yAxisType',
             'styleeditor.color',
             'styleeditor.fontSize',
+            'styleeditor.fontFamily',
             'widgets.advanced.prefix',
             'widgets.advanced.format ',
             'widgets.advanced.suffix',
@@ -88,6 +91,7 @@ describe('ChartAxisOptions', () => {
             'widgets.advanced.xAxisType',
             'styleeditor.color',
             'styleeditor.fontSize',
+            'styleeditor.fontFamily',
             'widgets.advanced.side',
             'widgets.advanced.anchor'
         ]);

diff --git a/web/client/components/widgets/builder/wizard/chart/__tests__/ChartLayoutOptions-test.jsx b/web/client/components/widgets/builder/wizard/chart/__tests__/ChartLayoutOptions-test.jsx
@@ -72,7 +72,7 @@ describe('ChartLayoutOptions', () => {
             }]
         }}/>, document.getElementById('container'));
         const controlLabelsNodes = document.querySelectorAll('.control-label');
-        expect([...controlLabelsNodes].map(node => node.innerText)).toEqual([ 'widgets.advanced.barChartType' ]);
+        expect([...controlLabelsNodes].map(node => node.innerText)).toEqual([ 'widgets.advanced.barChartType', 'styleeditor.color', 'styleeditor.fontSize', 'styleeditor.fontFamily' ]);
         const checkboxNodes = document.querySelectorAll('.checkbox');
         expect([...checkboxNodes].map(node => node.innerText)).toEqual([
             'widgets.advanced.displayCartesian',