Skip to content

Commit

Permalink
Make vega charts dark mode compatible
Browse files Browse the repository at this point in the history
This means style information needs to be removed from spec config key in database via e.g.
```python
import json
from fragdenstaat_de.fds_cms.cms_plugins import VegaChartCMSPlugin

charts = VegaChartCMSPlugin.objects.all()
for chart in charts:
    vega = json.loads(chart.vega_json)
    changed = vega.pop("background", None)
    config = vega.get("config")
    if config and config.get("axis", {}).get("domainColor"):
        vega.pop("config")
        changed = True
    if changed:
        print(chart.title)
        print(vega.get("background"), vega.get("config"))
        chart.vega_json = json.dumps(vega)
        chart.save()
```
  • Loading branch information
stefanw committed Oct 30, 2023
1 parent 46c7594 commit 57a38cd
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 0 deletions.
41 changes: 41 additions & 0 deletions frontend/javascript/vegacharts.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,48 @@
import '../styles/vega.scss'

import { expressionInterpreter } from 'vega-interpreter'
import { mergeConfig } from 'vega'
import embed from 'vega-embed'

const backgroundColor = 'var(--bs-body-bg)'
const textColor = 'var(--bs-body-color)'
const mediumColor = 'var(--bs-secondary-bg)'

const colorTheme = {
background: backgroundColor,

view: {
stroke: mediumColor
},

title: {
color: textColor,
subtitleColor: textColor
},

style: {
'guide-label': {
fill: textColor
},
'guide-title': {
fill: textColor
},
cell: { stroke: null },
'group-title': { font: 'Inter', fontSize: 14, fontWeight: 'bold' }
},

axis: {
domainColor: mediumColor,
gridColor: mediumColor,
tickColor: mediumColor,
labelColor: textColor,
labelFont: 'Inter',
labelFontSize: 12,
titleFont: 'Inter',
titleFontWeight: 'normal'
}
}

const LOCALE = {
de: {
number: {
Expand Down Expand Up @@ -95,6 +135,7 @@ document.querySelectorAll('[data-vegachart]').forEach((el) => {
expr: expressionInterpreter,
renderer: 'svg',
actions: showActions,
config: mergeConfig(colorTheme, spec.config),
...extras
})
})
13 changes: 13 additions & 0 deletions frontend/styles/vega.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";

.vega-chart {
overflow: hidden;
width: 100%;
Expand All @@ -9,3 +12,13 @@
.vega-embed {
width: 100%;
}

#vg-tooltip-element {
background-color: var(--#{$prefix}body-bg);
border: 1px solid var(--#{$prefix}tertiary-bg);
color: var(--#{$prefix}body-color);

td.key {
color: var(--#{$prefix}secondary-color);
}
}

0 comments on commit 57a38cd

Please sign in to comment.