Merge pull request #1793 from Inist-CNRS/vega-preview

Add preview and increases ux on Vega and Vega-Lite chart
Inist-CNRS · Dec 11, 2023 · c164e52 · c164e52
2 parents f49bfaa + 3ffade6
commit c164e52
Show file tree

Hide file tree

Showing 37 changed files with 1,171 additions and 688 deletions.
diff --git a/src/app/custom/translations.tsv b/src/app/custom/translations.tsv
@@ -1029,4 +1029,7 @@ format_x_axis_title	Title of x axis	Titre de l'axe x
 format_y_axis_title	Title of y axis	Titre de l'axe y
 "formatJsonDebug"	"Other - Json and Debug Format"	"Autre - Format Json et Débogage"
 "formatJsonDebugDescription"	"This format allow to display simple json value or debug values as json"	"Ce format permet d'afficher des valeurs json simples ou des valeurs de débogage sous forme de json."
-"debugMode"	"Enable debugging"	"Activer le débogage"
+"debugMode"	"Enable debugging"	"Activer le débogage"
+format_data_params	Data Parameters	Paramètres des Données
+format_chart_params	Chart Parameters	Paramètres du Graphique
+format_preview	Format Preview	Aperçu du Format
diff --git a/src/app/js/formats/aspectRatio.js b/src/app/js/formats/aspectRatio.js
@@ -0,0 +1,7 @@
+// You can find aspect ratio preview at: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp
+export const ASPECT_RATIO_1_1 = '1 / 1';
+export const ASPECT_RATIO_3_2 = '3 / 2';
+export const ASPECT_RATIO_4_3 = '4 / 3';
+export const ASPECT_RATIO_8_5 = '8 / 5';
+export const ASPECT_RATIO_16_6 = '16 / 6';
+export const ASPECT_RATIO_16_9 = '16 / 9';
diff --git a/src/app/js/formats/vega-lite/VegaLiteAdmin.js b/src/app/js/formats/vega-lite/VegaLiteAdmin.js
@@ -6,7 +6,13 @@ import { Box, TextField } from '@mui/material';
 import { polyglot as polyglotPropTypes } from '../../propTypes';
 import updateAdminArgs from '../shared/updateAdminArgs';
 import RoutineParamsAdmin from '../shared/RoutineParamsAdmin';
-import VegaAdvancedMode from '../shared/VegaAdvancedMode';
+import VegaAdvancedMode from '../vega-utils/components/VegaAdvancedMode';
+import {
+    VegaChartParamsFieldSet,
+    VegaDataParamsFieldSet,
+} from '../vega-utils/components/VegaFieldSet';
+import VegaFieldPreview from '../vega-utils/components/VegaFieldPreview';
+import { VegaLiteAdminView } from './VegaLiteView';
 
 export const defaultArgs = {
     params: {
@@ -61,53 +67,61 @@ const VegaLiteAdmin = props => {
             justifyContent="space-between"
             gap={2}
         >
-            <RoutineParamsAdmin
-                params={params || defaultArgs.params}
-                polyglot={p}
-                onChange={handleParams}
-                showMaxSize={showMaxSize}
-                showMaxValue={showMaxValue}
-                showMinValue={showMinValue}
-                showOrderBy={showOrderBy}
-            />
-            <Box width="100%">
-                <VegaAdvancedMode
-                    value={formattedSpecTemplate}
-                    onChange={handleSpecTemplate}
+            <VegaDataParamsFieldSet>
+                <RoutineParamsAdmin
+                    params={params || defaultArgs.params}
+                    polyglot={p}
+                    onChange={handleParams}
+                    showMaxSize={showMaxSize}
+                    showMaxValue={showMaxValue}
+                    showMinValue={showMinValue}
+                    showOrderBy={showOrderBy}
                 />
-                <a
-                    href="https://vega.github.io/vega-lite/docs/size.html#specifying-width-and-height-per-discrete-step"
-                    target="_blank"
-                    rel="noopener nofollow noreferrer"
-                >
-                    {p.t('vega_size_step')}
-                </a>
-            </Box>
-            <TextField
-                type="number"
-                min={10}
-                max={200}
-                step={10}
-                label={p.t('vegalite_width')}
-                onChange={handleWidth}
-                value={width}
-                fullWidth
-                InputProps={{
-                    endAdornment: '%',
-                }}
-            />
-            <TextField
-                type="number"
-                min={10}
-                max={800}
-                step={10}
-                label={p.t('vegalite_height')}
-                onChange={handleHeight}
-                value={height}
-                fullWidth
-                InputProps={{
-                    endAdornment: '%',
-                }}
+            </VegaDataParamsFieldSet>
+            <VegaChartParamsFieldSet>
+                <Box width="100%">
+                    <VegaAdvancedMode
+                        value={formattedSpecTemplate}
+                        onChange={handleSpecTemplate}
+                    />
+                    <a
+                        href="https://vega.github.io/vega-lite/docs/size.html#specifying-width-and-height-per-discrete-step"
+                        target="_blank"
+                        rel="noopener nofollow noreferrer"
+                    >
+                        {p.t('vega_size_step')}
+                    </a>
+                </Box>
+                <TextField
+                    type="number"
+                    min={10}
+                    max={200}
+                    step={10}
+                    label={p.t('vegalite_width')}
+                    onChange={handleWidth}
+                    value={width}
+                    fullWidth
+                    InputProps={{
+                        endAdornment: '%',
+                    }}
+                />
+                <TextField
+                    type="number"
+                    min={10}
+                    max={800}
+                    step={10}
+                    label={p.t('vegalite_height')}
+                    onChange={handleHeight}
+                    value={height}
+                    fullWidth
+                    InputProps={{
+                        endAdornment: '%',
+                    }}
+                />
+            </VegaChartParamsFieldSet>
+            <VegaFieldPreview
+                args={args}
+                PreviewComponent={VegaLiteAdminView}
             />
         </Box>
     );

diff --git a/src/app/js/formats/vega-lite/VegaLiteView.js b/src/app/js/formats/vega-lite/VegaLiteView.js
@@ -13,7 +13,7 @@ import {
     VEGA_ACTIONS_WIDTH,
     VEGA_LITE_DATA_INJECT_TYPE_A,
 } from '../chartsUtils';
-import { useSizeObserver } from '../chartsHooks';
+import { useSizeObserver } from '../vega-utils/chartsHooks';
 
 const styles = {
     container: {
@@ -77,4 +77,16 @@ const mapStateToProps = (state, { formatData }) => {
     };
 };
 
+export const VegaLiteAdminView = connect((state, props) => {
+    return {
+        ...props,
+        field: {
+            format: 'Preview Format',
+        },
+        data: {
+            values: props.dataset.values ?? [],
+        },
+    };
+})(VegaLiteView);
+
 export default compose(injectData(), connect(mapStateToProps))(VegaLiteView);