Add preview and increases ux on Vega and Vega-Lite chart

src/app/custom/translations.tsv

@@ -1017,4 +1017,7 @@ vega_variable_list	You can use these variables to set the size dynamically:	Vous
 vega_variable_width	Replace with the width of the chart container	Remplacée par la largeur du conteneur du graphique
 vega_variable_height	Replace with the height of the chart container	Remplacée par la hauteur du conteneur du graphique
 theme	Application theme	Thème de l'application
-"error_precomputed_data_empty"	"Precomputed data is empty or unfinished. You might want to relaunch the action"	"Les données précalculées sont vides ou non terminées. Vous pouvez relancer l'action"
+"error_precomputed_data_empty"	"Precomputed data is empty or unfinished. You might want to relaunch the action"	"Les données précalculées sont vides ou non terminées. Vous pouvez relancer l'action"
+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

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';

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>
     );

src/app/js/formats/vega-lite/VegaLiteView.js

@@ -11,7 +11,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: {
@@ -75,4 +75,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);