Merge pull request #443 from deneb-viz/bugfix/erroneous-config

fix: correct config for inbuilt templates (#434)
deneb-viz · May 17, 2024 · d8001bc · d8001bc
2 parents 2d61b6a + 252859a
commit d8001bc
Show file tree

Hide file tree

Showing 12 changed files with 61 additions and 48 deletions.
diff --git a/src/features/template/included/vega-lite/index.ts b/src/features/template/included/vega-lite/index.ts
@@ -12,6 +12,7 @@ import { vlEmpty } from './vl-empty';
 import { vlEmptyConfig } from './vl-empty-config';
 import { vlBarSimple } from './vl-bar-simple';
 import { vlBarInteractive } from './vl-bar-interactive';
+import { powerbiTheme } from '../../../vega-extensibility';
 
 /**
  * Included Vega templates (for use in the create process).
@@ -22,3 +23,9 @@ export const VEGA_LITE_INCLUDED_TEMPLATES = [
     vlBarSimple,
     vlBarInteractive
 ];
+
+/**
+ * Adds the Power BI themeing for Vega-Lite as a formatted string to templates that need it.
+ */
+export const getTemplatePowerBiConfigVl = () =>
+    JSON.stringify(powerbiTheme(), null, 2);
diff --git a/src/features/template/included/vega-lite/vl-bar-interactive.ts b/src/features/template/included/vega-lite/vl-bar-interactive.ts
@@ -30,7 +30,6 @@ const dataset: UsermetaDatasetField[] = [
 export const vlBarInteractive = (): TopLevelSpec => ({
     $schema: VEGA_LITE_SCHEMA_URL,
     data: getDenebTemplateDatasetRef(),
-    config: {},
     layer: [
         {
             mark: {

diff --git a/src/features/template/included/vega-lite/vl-bar-simple.ts b/src/features/template/included/vega-lite/vl-bar-simple.ts
@@ -26,7 +26,6 @@ const dataset: UsermetaDatasetField[] = [
 export const vlBarSimple = (): TopLevelSpec => ({
     $schema: VEGA_LITE_SCHEMA_URL,
     data: getDenebTemplateDatasetRef(),
-    config: {},
     mark: {
         type: 'bar'
     },

diff --git a/src/features/template/included/vega-lite/vl-empty-config.ts b/src/features/template/included/vega-lite/vl-empty-config.ts
@@ -1,17 +1,18 @@
-import { Config, TopLevelSpec } from 'vega-lite';
+import { TopLevelSpec } from 'vega-lite';
 
-import { VEGA_LITE_SCHEMA_URL } from '.';
+import { VEGA_LITE_SCHEMA_URL, getTemplatePowerBiConfigVl } from '.';
 import { getDenebTemplateDatasetRef, getNewIncludedTemplateMetadata } from '..';
-import { powerbiTheme } from '../../../vega-extensibility/extensibility/powerbi-theme';
 
 export const vlEmptyConfig = (): TopLevelSpec => ({
     $schema: VEGA_LITE_SCHEMA_URL,
     data: getDenebTemplateDatasetRef(),
-    config: { ...powerbiTheme() } as Config,
     layer: [],
-    usermeta: getNewIncludedTemplateMetadata(
-        'vegaLite',
-        '[empty (with Power BI theming)]',
-        'Bare-minimum Vega-Lite template, with data-binding pre-populated. Contains configuration defaults for marks and axes to provide a Power BI-like look and feel.'
-    )
+    usermeta: {
+        ...getNewIncludedTemplateMetadata(
+            'vegaLite',
+            '[empty (with Power BI theming)]',
+            'Bare-minimum Vega-Lite template, with data-binding pre-populated. Contains configuration defaults for marks and axes to provide a Power BI-like look and feel.'
+        ),
+        config: getTemplatePowerBiConfigVl()
+    }
 });
diff --git a/src/features/template/included/vega-lite/vl-empty.ts b/src/features/template/included/vega-lite/vl-empty.ts
@@ -6,7 +6,6 @@ import { getDenebTemplateDatasetRef, getNewIncludedTemplateMetadata } from '..';
 export const vlEmpty = (): TopLevelSpec => ({
     $schema: VEGA_LITE_SCHEMA_URL,
     data: getDenebTemplateDatasetRef(),
-    config: {},
     layer: [],
     usermeta: getNewIncludedTemplateMetadata(
         'vegaLite',

diff --git a/src/features/template/included/vega/index.ts b/src/features/template/included/vega/index.ts
@@ -1,9 +1,9 @@
 /**
- * Vega-Lite templates that are included with Deneb.
+ * Vega templates that are included with Deneb.
  */
-import { Config } from 'vega';
 import { getDenebTemplateDatasetRef } from '..';
 import { PROVIDER_RESOURCES } from '../../../../../config';
+import { powerBiThemeVega } from '../../../vega-extensibility';
 
 /**
  * Schema URL for all templates.
@@ -21,9 +21,15 @@ export const getDenebTemplateVegaDatasetRef = () => [
 /**
  * For Vega, we need to add some extra configuration, so we'll do this here.
  */
-export const getDenebTemplateVegaSpecificConfig = (): Config => ({
-    autosize: { contains: 'padding', type: 'fit' }
-});
+export const getDenebTemplateVegaSpecificConfig = (includeTheme = false) =>
+    JSON.stringify(
+        {
+            autosize: { contains: 'padding', type: 'fit' },
+            ...(includeTheme && powerBiThemeVega())
+        },
+        null,
+        2
+    );
 
 import { vEmpty } from './v-empty';
 import { vEmptyConfig } from './v-empty-config';

diff --git a/src/features/template/included/vega/v-bar-interactive.ts b/src/features/template/included/vega/v-bar-interactive.ts
@@ -35,7 +35,6 @@ const dataset: UsermetaDatasetField[] = [
 export const vBarInteractive = (): Spec => ({
     $schema: VEGA_SCHEMA_URL,
     data: getDenebTemplateVegaDatasetRef(),
-    config: { ...getDenebTemplateVegaSpecificConfig() },
     scales: [
         {
             name: 'yscale',
@@ -153,7 +152,8 @@ export const vBarInteractive = (): Spec => ({
                 highlight: true,
                 selection: true,
                 dataPointLimit: PROPERTIES_DEFAULTS.vega.selectionMaxDataPoints
-            }
+            },
+            config: getDenebTemplateVegaSpecificConfig()
         }
     }
 });
diff --git a/src/features/template/included/vega/v-bar-simple.ts b/src/features/template/included/vega/v-bar-simple.ts
@@ -31,7 +31,6 @@ const dataset: UsermetaDatasetField[] = [
 export const vBarSimple = (): Spec => ({
     $schema: VEGA_SCHEMA_URL,
     data: getDenebTemplateVegaDatasetRef(),
-    config: { ...getDenebTemplateVegaSpecificConfig() },
     scales: [
         {
             name: 'yscale',
@@ -102,6 +101,6 @@ export const vBarSimple = (): Spec => ({
             'A simple bar chart for a category and a measure.',
             'vBarSimple'
         ),
-        ...{ dataset }
+        ...{ dataset, config: getDenebTemplateVegaSpecificConfig() }
     }
 });
diff --git a/src/features/template/included/vega/v-empty-config.ts b/src/features/template/included/vega/v-empty-config.ts
@@ -1,17 +1,22 @@
-import { Config, Spec } from 'vega';
+import { Spec } from 'vega';
 
-import { getDenebTemplateVegaDatasetRef, VEGA_SCHEMA_URL } from '.';
+import {
+    getDenebTemplateVegaDatasetRef,
+    getDenebTemplateVegaSpecificConfig,
+    VEGA_SCHEMA_URL
+} from '.';
 import { getNewIncludedTemplateMetadata } from '..';
-import { powerBiThemeVega } from '../../../vega-extensibility/extensibility/powerbi-theme';
 
 export const vEmptyConfig = (): Spec => ({
     $schema: VEGA_SCHEMA_URL,
     data: getDenebTemplateVegaDatasetRef(),
-    config: { ...powerBiThemeVega() } as Config,
     marks: [],
-    usermeta: getNewIncludedTemplateMetadata(
-        'vega',
-        '[empty (with Power BI theming)]',
-        'Bare-minimum Vega template, with data-binding pre-populated. Contains configuration defaults for marks and axes to provide a Power BI-like look and feel.'
-    )
+    usermeta: {
+        ...getNewIncludedTemplateMetadata(
+            'vega',
+            '[empty (with Power BI theming)]',
+            'Bare-minimum Vega template, with data-binding pre-populated. Contains configuration defaults for marks and axes to provide a Power BI-like look and feel.'
+        ),
+        config: getDenebTemplateVegaSpecificConfig(true)
+    }
 });
diff --git a/src/features/template/included/vega/v-empty.ts b/src/features/template/included/vega/v-empty.ts
@@ -1,16 +1,22 @@
 import { Spec } from 'vega';
 
-import { getDenebTemplateVegaDatasetRef, VEGA_SCHEMA_URL } from '.';
+import {
+    getDenebTemplateVegaDatasetRef,
+    getDenebTemplateVegaSpecificConfig,
+    VEGA_SCHEMA_URL
+} from '.';
 import { getNewIncludedTemplateMetadata } from '..';
 
 export const vEmpty = (): Spec => ({
     $schema: VEGA_SCHEMA_URL,
     data: getDenebTemplateVegaDatasetRef(),
-    config: {},
     marks: [],
-    usermeta: getNewIncludedTemplateMetadata(
-        'vega',
-        '[empty]',
-        'Bare-minimum Vega template, with data-binding pre-populated. Has no additional configuration for styling.'
-    )
+    usermeta: {
+        ...getNewIncludedTemplateMetadata(
+            'vega',
+            '[empty]',
+            'Bare-minimum Vega template, with data-binding pre-populated. Has no additional configuration for styling.'
+        ),
+        config: getDenebTemplateVegaSpecificConfig()
+    }
 });
diff --git a/src/features/vega-extensibility/extensibility/index.ts b/src/features/vega-extensibility/extensibility/index.ts
@@ -1,7 +1,7 @@
 import { registerCustomExpressions } from './expressions';
 import { registerCustomSchemes } from './schemes';
 
-export { getTemplateWithBasePowerBiTheme } from './powerbi-theme';
+export { powerbiTheme, powerBiThemeVega } from './powerbi-theme';
 
 /**
  * Use declare and initialize the service to ensure that it is available for

diff --git a/src/features/vega-extensibility/extensibility/powerbi-theme.ts b/src/features/vega-extensibility/extensibility/powerbi-theme.ts
@@ -1,6 +1,5 @@
-import { Config as VgConfig, Spec } from 'vega';
-import { Config as VlConfig, TopLevelSpec } from 'vega-lite';
-import merge from 'lodash/merge';
+import { Config as VgConfig } from 'vega';
+import { Config as VlConfig } from 'vega-lite';
 import { interpolateHcl, interpolateRgbBasis, quantize } from 'd3';
 
 import { ptToPx } from '../../../core/ui/dom';
@@ -90,13 +89,6 @@ export const powerBiThemeVega = () =>
         }
     } as VgConfig);
 
-/**
- * Merge supplied template with base theme config
- */
-export const getTemplateWithBasePowerBiTheme = (
-    template: Spec | TopLevelSpec
-): Spec | TopLevelSpec => merge(template, { config: powerbiTheme() });
-
 /**
  * Helper function to extract palette color by (zero-based) index.
  */