Skip to content

Commit

Permalink
force light color in exports
Browse files Browse the repository at this point in the history
  • Loading branch information
@brc-dd
brc-dd committed Mar 10, 2025
1 parent 0e99295 commit 7fff0e5
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 39 deletions.
12 changes: 6 additions & 6 deletions lib/components/SChartBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { useElementSize } from '@vueuse/core'
import * as d3 from 'd3'
import { ref, watch } from 'vue'
import { type ChartColor, type KV, scheme } from '../support/Chart'
import { type ChartColor, type KV, c, scheme } from '../support/Chart'
export type { ChartColor, KV }
Expand Down Expand Up @@ -99,7 +99,7 @@ function renderChart({
.attr('transform', `translate(0,${height})`)
.call(vertical ? d3.axisBottom(x) : d3.axisBottom(y).ticks(props.ticks))
.selectAll('text')
.attr('fill', 'var(--c-text-2)')
.attr('fill', c.text2)
.style('font-size', '14px')
.style('text-anchor', 'middle')
Expand All @@ -113,7 +113,7 @@ function renderChart({
.append('g')
.call(vertical ? d3.axisLeft(y).ticks(props.ticks) : d3.axisLeft(x))
.selectAll('text')
.attr('fill', 'var(--c-text-2)')
.attr('fill', c.text2)
.style('font-size', '14px')
// Remove Y axis line
Expand All @@ -127,7 +127,7 @@ function renderChart({
.data(y.ticks(props.ticks))
.enter()
.append('line')
.attr('stroke', 'var(--c-divider)')
.attr('stroke', c.divider)
.attr('stroke-dasharray', '2,2')
if (vertical) {
Expand All @@ -150,7 +150,7 @@ function renderChart({
.append('text')
.attr('x', width / 2)
.attr('y', height + xLabelOffset)
.attr('fill', 'var(--c-text-2)')
.attr('fill', c.text2)
.style('font-size', '14px')
.style('text-anchor', 'middle')
.html(props.xLabel)
Expand All @@ -161,7 +161,7 @@ function renderChart({
.attr('x', -height / 2)
.attr('y', -yLabelOffset)
.attr('transform', 'rotate(-90)')
.attr('fill', 'var(--c-text-2)')
.attr('fill', c.text2)
.style('font-size', '14px')
.style('text-anchor', 'middle')
.html(props.yLabel)
Expand Down
10 changes: 5 additions & 5 deletions lib/components/SChartPie.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { useElementSize } from '@vueuse/core'
import * as d3 from 'd3'
import { ref, watch } from 'vue'
import { type ChartColor, type KV, scheme } from '../support/Chart'
import { type ChartColor, type KV, c, scheme } from '../support/Chart'
export type { ChartColor, KV }
Expand Down Expand Up @@ -132,7 +132,7 @@ function renderChart({
.attr('x', 30)
.attr('y', 14 / 2)
.attr('dy', '0.35em')
.attr('fill', 'var(--c-text-2)')
.attr('fill', c.text2)
.html((d) => props.legendFormatKey(d.data))
// Show value next to the legend
Expand All @@ -141,7 +141,7 @@ function renderChart({
.attr('x', 30 + props.legendPadding)
.attr('y', 14 / 2)
.attr('dy', '0.35em')
.attr('fill', 'var(--c-text-1)')
.attr('fill', c.text1)
.attr('text-anchor', 'end')
.html((d) => props.legendFormatValue(d.data))
Expand Down Expand Up @@ -237,7 +237,7 @@ function renderChart({
labels
.append('polyline')
.attr('stroke', 'var(--c-divider)')
.attr('stroke', c.divider)
.attr('fill', 'none')
.attr('points', (d) => {
const posA = arc.centroid(d)
Expand All @@ -255,9 +255,9 @@ function renderChart({
return `translate(${pos})`
})
.attr('dy', '0.35em')
.attr('fill', c.text2)
.attr('text-anchor', (d) => leftOrRight(d) === 1 ? 'start' : 'end')
.style('font-size', '14px')
.style('fill', 'var(--c-text-2)')
.html((d) => props.labelFormat(d.data))
if (animate) {
Expand Down
64 changes: 38 additions & 26 deletions lib/support/Chart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,18 @@ import html2canvas from 'html2canvas'
const isLightDarkSupported
= typeof CSS !== 'undefined' && CSS.supports('color', 'light-dark(#000, #fff)')

export const c = {
text1: isLightDarkSupported ? 'light-dark(#1c2024, #edeef0)' : 'var(--c-text-1)',
text2: isLightDarkSupported ? 'light-dark(#0007149e, #eff5ffb0)' : 'var(--c-text-2)',
divider: isLightDarkSupported ? 'light-dark(#e0e0e1, #2e3035)' : 'var(--c-divider)'
}

const c_light = {
text1: '#1c2024',
text2: '#0007149e',
divider: '#e0e0e1'
}

// radixLight.9, radixDark.10
export const chartColors = {
// orange: isLightDarkSupported ? 'light-dark(#f76b15, #ff801f)' : '#f76b15',
Expand Down Expand Up @@ -79,37 +91,37 @@ export async function exportAsPng(_el: any, fileName = 'chart.png', delay = 0):
const SCard = el.closest('.SCard')
if (!(SCard instanceof HTMLElement)) { return }

// TODO: force render in light mode
const canvas = await html2canvas(SCard, {
scale: 2,
backgroundColor: getBackgroundColor(el),
logging: false,
ignoreElements: (el) => el.classList.contains('SControlActionBar')
ignoreElements: (el) => el.classList.contains('SControlActionBar'),
onclone(document, element) {
document.documentElement.classList.remove('dark')
for (const el of element.querySelectorAll<HTMLElement>('*')) {
el.style.backgroundColor = 'transparent'
for (const [key, value] of Object.entries(c)) {
for (const attr of ['fill', 'stroke'] as const) {
if (el.getAttribute(attr) === value) {
el.style[attr] = c_light[key as keyof typeof c_light]
}
}
}
}
}
})

// // for debugging
// const blob = await new Promise<Blob>((resolve) => {
// canvas.toBlob((b) => {
// if (b) {
// resolve(b)
// } else {
// resolve(new Blob())
// }
// }, 'image/png')
// })
// window.open(URL.createObjectURL(blob), '_blank')

const dataUrl = canvas.toDataURL('image/png')
FileSaver.saveAs(dataUrl, fileName)
}

function getBackgroundColor(el: HTMLElement | null): string {
const defaultColor = 'rgba(0, 0, 0, 0)'
let color = 'rgba(0, 0, 0, 0)'

while (el) {
const bgColor = window.getComputedStyle(el).backgroundColor
if (bgColor !== defaultColor) {
color = bgColor
break
}

el = el.parentElement
}

if (color === defaultColor) {
return document.documentElement.classList.contains('dark')
? 'rgba(0, 0, 0, 1)'
: 'rgba(255, 255, 255, 1)'
}

return color
}
4 changes: 2 additions & 2 deletions stories/components/SChart.01_Playground.story.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import SControlActionBarButton from 'sefirot/components/SControlActionBarButton.
import SControlLeft from 'sefirot/components/SControlLeft.vue'
import SControlRight from 'sefirot/components/SControlRight.vue'
import SControlText from 'sefirot/components/SControlText.vue'
import { type KV, exportAsPng } from 'sefirot/support/Chart'
import { type KV, c, exportAsPng } from 'sefirot/support/Chart'
import { ref, useTemplateRef } from 'vue'
const title = 'Components / SChart / 01. Playground'
Expand All @@ -34,7 +34,7 @@ function tooltipFormat(d: KV) {
}
function labelFormat(d: KV) {
return `${d.key} &ndash; <tspan fill="var(--c-text-1)">${d.value}</tspan>`
return `${d.key} &ndash; <tspan fill="${c.text1}">${d.value}</tspan>`
}
function state() {
Expand Down

0 comments on commit 7fff0e5

Please sign in to comment.