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 authored and krmax44 committed Oct 30, 2023
1 parent 46c7594 commit 378cd7d
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 378cd7d

Please sign in to comment.