From 980c81ec2f89a8898a63b8159354b9c1dabe3bea Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Fri, 6 Dec 2024 11:09:10 +0100 Subject: [PATCH] tmp --- docs/examples/index.js | 8 +- src/theme/ODS.project.ts | 136 ++++++++++++------------- src/theme/legends/ods-chart-legends.ts | 4 +- src/theme/light/ODS.common.ts | 2 +- src/theme/light/ODS.lines.axis.ts | 24 ++--- src/theme/ods-chart-theme.ts | 10 +- src/theme/popover/ods-chart-popover.ts | 14 +-- 7 files changed, 99 insertions(+), 99 deletions(-) diff --git a/docs/examples/index.js b/docs/examples/index.js index 8e948664..3fb3b55c 100644 --- a/docs/examples/index.js +++ b/docs/examples/index.js @@ -37,18 +37,18 @@ async function wait(timer = 0) { function generateChartDiv(id, direction) { return ` -
+

Title

Sub-Title
-
+
${buildChartDiv(id)}
-
+
`; } @@ -64,7 +64,7 @@ function generateConfigurator(id) { }, header: { begin: (id, itemId) => `

-

`, diff --git a/src/theme/ODS.project.ts b/src/theme/ODS.project.ts index b91b444f..ccaa05fe 100644 --- a/src/theme/ODS.project.ts +++ b/src/theme/ODS.project.ts @@ -401,14 +401,14 @@ export interface EChartsProject { export const ODS_PROJECT: EChartsProject = { color: ['#4bb4e6', '#50be87', '#ffb4e6', '#a885d8', '#ffd200'], - backgroundColor: 'transparent', + backgroundColor: 'var(--bs-body-bg, transparent)', textStyle: {}, title: { textStyle: { - color: '#000000', + color: 'var(--bs-body-color, #000000)', }, subtextStyle: { - color: '#666666', + color: 'var(--bs-secondary-color, #666666)', }, }, line: { @@ -436,114 +436,114 @@ export const ODS_PROJECT: EChartsProject = { bar: { itemStyle: { barBorderWidth: '2', - barBorderColor: '#ffffff', + barBorderColor: 'var(--bs-body-bg, #ffffff)', }, }, pie: { itemStyle: { borderWidth: '2', - borderColor: '#ffffff', + borderColor: 'var(--bs-body-bg, #ffffff)', }, }, scatter: { itemStyle: { borderWidth: '2', - borderColor: '#ffffff', + borderColor: 'var(--bs-body-bg, #ffffff)', }, }, boxplot: { itemStyle: { borderWidth: '2', - borderColor: '#ffffff', + borderColor: 'var(--bs-body-bg, #ffffff)', }, }, parallel: { itemStyle: { borderWidth: '2', - borderColor: '#ffffff', + borderColor: 'var(--bs-body-bg, #ffffff)', }, }, sankey: { itemStyle: { borderWidth: '2', - borderColor: '#ffffff', + borderColor: 'var(--bs-body-bg, #ffffff)', }, }, funnel: { itemStyle: { borderWidth: '2', - borderColor: '#ffffff', + borderColor: 'var(--bs-body-bg, #ffffff)', }, }, gauge: { itemStyle: { borderWidth: '2', - borderColor: '#ffffff', + borderColor: 'var(--bs-body-bg, #ffffff)', }, }, candlestick: { itemStyle: { - color: '#32C832', - color0: '#CD3C14', - borderColor: '#32C832', - borderColor0: '#CD3C14', + color: 'var(--bs-success, #32c832)', + color0: 'var(--bs-danger, #cd3c14)', + borderColor: 'var(--bs-success, #32c832)', + borderColor0: 'var(--bs-danger, #cd3c14)', borderWidth: 1, }, }, graph: { itemStyle: { borderWidth: '2', - borderColor: '#ffffff', + borderColor: 'var(--bs-body-bg, #ffffff)', }, lineStyle: { width: 1, - color: '#aaa', + color: 'var(--bs-secondary-color, #aaaaaa)', }, symbolSize: 4, symbol: 'emptyCircle', smooth: false, color: ['#4bb4e6', '#50be87', '#ffb4e6', '#a885d8', '#ffd200'], label: { - color: '#000000', + color: 'var(--bs-body-color, #000000)', }, }, map: { itemStyle: { - areaColor: '#eee', - borderColor: '#444', + areaColor: 'var(--bs-secondary-bg, #eeeeee)', + borderColor: 'var(--bs-secondary-color, #444444)', borderWidth: 0.5, }, label: { - color: '#000', + color: 'var(--bs-body-color, #000000)', }, emphasis: { itemStyle: { - areaColor: 'rgba(255,215,0,0.8)', - borderColor: '#444', + areaColor: 'rgba(var(--bs-warning-rgb, 255,215,0),0.8)', + borderColor: 'var(--bs-secondary-color, #444444)', borderWidth: 1, }, label: { - color: 'rgb(100,0,0)', + color: 'var(--bs-black, rgb(100,0,0))', }, }, }, geo: { itemStyle: { - areaColor: '#eee', - borderColor: '#444', + areaColor: 'var(--bs-secondary-bg, #eeeeee)', + borderColor: 'var(--bs-secondary-color, #444444)', borderWidth: 0.5, }, label: { - color: '#000', + color: 'var(--bs-body-color, #000000)', }, emphasis: { itemStyle: { - areaColor: 'rgba(255,215,0,0.8)', - borderColor: '#444', + areaColor: 'rgba(var(--bs-warning-rgb, 255,215,0),0.8)', + borderColor: 'var(--bs-secondary-color, #444444)', borderWidth: 1, }, label: { - color: 'rgb(100,0,0)', + color: 'var(--bs-black, rgb(100,0,0))', }, }, }, @@ -551,29 +551,29 @@ export const ODS_PROJECT: EChartsProject = { axisLine: { show: true, lineStyle: { - color: '#cccccc', + color: 'var(--bs-border-color-subtle, #cccccc)', }, }, axisTick: { show: false, lineStyle: { - color: '#eb0909', + color: 'var(--bs-danger, #eb0909)', }, }, axisLabel: { show: true, - color: '#000000', + color: 'var(--bs-body-color, #000000)', }, splitLine: { show: false, lineStyle: { - color: ['#cccccc'], + color: ['var(--bs-border-color-subtle, #cccccc)'], }, }, splitArea: { show: false, areaStyle: { - color: ['#ffffff'], + color: ['var(--bs-body-bg, #ffffff)'], }, }, }, @@ -581,29 +581,29 @@ export const ODS_PROJECT: EChartsProject = { axisLine: { show: true, lineStyle: { - color: '#cccccc', + color: 'var(--bs-border-color-subtle, #cccccc)', }, }, axisTick: { show: false, lineStyle: { - color: '#6E7079', + color: 'var(--secondary-color, #6E7079)', }, }, axisLabel: { show: true, - color: '#000000', + color: 'var(--bs-body-color, #000000)', }, splitLine: { show: false, lineStyle: { - color: ['#cccccc'], + color: ['var(--bs-border-color-subtle, #cccccc)'], }, }, splitArea: { show: false, areaStyle: { - color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'], + color: ['rgba(var(--bs-body-bg-rgb, 250,250,250),0.2)', 'rgba(var(--bs-tertiary-color-rgb, 210,219,238),0.2)'], }, }, }, @@ -611,29 +611,29 @@ export const ODS_PROJECT: EChartsProject = { axisLine: { show: false, lineStyle: { - color: '#cccccc', + color: 'var(--bs-border-color-subtle, #cccccc)', }, }, axisTick: { show: false, lineStyle: { - color: '#6E7079', + color: 'var(--bs-secondary-color, #6E7079)', }, }, axisLabel: { show: true, - color: '#000000', + color: 'var(--bs-body-color, #000000)', }, splitLine: { show: false, lineStyle: { - color: ['#cccccc'], + color: ['var(--bs-border-color-subtle, #cccccc)'], }, }, splitArea: { show: false, areaStyle: { - color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'], + color: ['rgba(var(--bs-body-bg-rgb, 250,250,250),0.2)', 'rgba(var(--bs-tertiary-color-rgb, 210,219,238),0.2)'], }, }, }, @@ -641,91 +641,91 @@ export const ODS_PROJECT: EChartsProject = { axisLine: { show: true, lineStyle: { - color: '#cccccc', + color: 'var(--bs-border-color-subtle, #cccccc)', }, }, axisTick: { show: false, lineStyle: { - color: '#cccccc', + color: 'var(--bs-border-color-subtle, #cccccc)', }, }, axisLabel: { show: true, - color: '#000000', + color: 'var(--bs-body-color, #000000)', }, splitLine: { show: false, lineStyle: { - color: ['#cccccc'], + color: ['var(--bs-border-color-subtle, #cccccc)'], }, }, splitArea: { show: false, areaStyle: { - color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'], + color: ['rgba(var(--bs-body-bg-rgb, 250,250,250),0.2)', 'rgba(var(--bs-tertiary-color-rgb, 210,219,238),0.2)'], }, }, }, toolbox: { iconStyle: { - borderColor: '#999', + borderColor: 'var(--bs-secondary-color, #999999)', }, emphasis: { iconStyle: { - borderColor: '#666', + borderColor: 'var(--bs-body-color, #666666)', }, }, }, legend: { textStyle: { - color: '#333', + color: 'var(--bs-body-color, #333333)', }, }, tooltip: { axisPointer: { lineStyle: { - color: '#ccc', + color: 'var(--bs-border-color-subtle, #cccccc)', width: 1, }, crossStyle: { - color: '#ccc', + color: 'var(--bs-border-color-subtle, #cccccc)', width: 1, }, }, }, timeline: { lineStyle: { - color: '#DAE1F5', + color: 'var(--bs-tertiary-bg, #dae1f5)', width: 2, }, itemStyle: { - color: '#A4B1D7', + color: 'var(--bs-secondary-bg, #a4b1d7)', borderWidth: 1, }, controlStyle: { - color: '#A4B1D7', - borderColor: '#A4B1D7', + color: 'var(--bs-secondary-bg, #a4b1d7)', + borderColor: 'var(--bs-secondary-bg, #a4b1d7)', borderWidth: 1, }, checkpointStyle: { - color: '#316bf3', - borderColor: 'fff', + color: 'var(--bs-info, #316bf3)', + borderColor: 'var(--bs-body-bg, #ffffff)', }, label: { - color: '#A4B1D7', + color: 'var(--bs-secondary-bg, #a4b1d7)', }, emphasis: { itemStyle: { - color: '#FFF', + color: 'var(--bs-body-bg, #ffffff)', }, controlStyle: { - color: '#A4B1D7', - borderColor: '#A4B1D7', + color: 'var(--bs-secondary-bg, #a4b1d7)', + borderColor: 'var(--bs-secondary-bg, #a4b1d7)', borderWidth: 1, }, label: { - color: '#A4B1D7', + color: 'var(--bs-secondary-bg, #a4b1d7)', }, }, }, @@ -734,11 +734,11 @@ export const ODS_PROJECT: EChartsProject = { }, markPoint: { label: { - color: '#000000', + color: 'var(--bs-body-color, #000000)', }, emphasis: { label: { - color: '#000000', + color: 'var(--bs-body-color, #000000)', }, }, }, diff --git a/src/theme/legends/ods-chart-legends.ts b/src/theme/legends/ods-chart-legends.ts index 4538fba2..40830b8a 100644 --- a/src/theme/legends/ods-chart-legends.ts +++ b/src/theme/legends/ods-chart-legends.ts @@ -33,14 +33,14 @@ const DEFAULT_CSS = `.ods-charts-no-css-lib.ods-charts-legend-holder { padding-bottom: 0.625rem; margin-right: 20px; margin-left: 20px; - color: #000; + color: var(--bs-body-color, #000000); } .ods-charts-no-css-lib .ods-charts-legend-link.ods-charts-legend-link-opacity { opacity: .25; } .ods-charts-no-css-lib .ods-charts-legend-color-holder { - border: 1px solid #000; + border: 1px solid var(--bs-border-color, #000000); display: inline-block; } diff --git a/src/theme/light/ODS.common.ts b/src/theme/light/ODS.common.ts index 114c9717..39dcb4fe 100644 --- a/src/theme/light/ODS.common.ts +++ b/src/theme/light/ODS.common.ts @@ -7,5 +7,5 @@ // export const LIGHT_COMMON = { - backgroundColor: 'rgba(255, 255, 255, 1)', + backgroundColor: 'var(--bs-body-bg, rgba(255, 255, 255, 1))', }; diff --git a/src/theme/light/ODS.lines.axis.ts b/src/theme/light/ODS.lines.axis.ts index cb63ef98..4269f211 100644 --- a/src/theme/light/ODS.lines.axis.ts +++ b/src/theme/light/ODS.lines.axis.ts @@ -11,17 +11,17 @@ export const LIGHT_LINES_AXIS = { axisLine: { show: true, lineStyle: { - color: '#cccccc', + color: 'var(--bs-border-color-subtle, #cccccc)', }, }, axisLabel: { show: true, - color: '#000000', + color: 'var(--bs-body-color, #000000)', }, axisTick: { show: false, lineStyle: { - color: '#cccccc', + color: 'var(--bs-border-color-subtle, #cccccc)', }, }, }, @@ -29,17 +29,17 @@ export const LIGHT_LINES_AXIS = { axisLine: { show: true, lineStyle: { - color: '#cccccc', + color: 'var(--bs-border-color-subtle, #cccccc)', }, }, axisLabel: { show: true, - color: '#000000', + color: 'var(--bs-body-color, #000000)', }, axisTick: { show: false, lineStyle: { - color: '#cccccc', + color: 'var(--bs-border-color-subtle, #cccccc)', }, }, }, @@ -47,17 +47,17 @@ export const LIGHT_LINES_AXIS = { axisLine: { show: true, lineStyle: { - color: '#cccccc', + color: 'var(--bs-border-color-subtle, #cccccc)', }, }, axisLabel: { show: true, - color: '#000000', + color: 'var(--bs-body-color, #000000)', }, axisTick: { show: false, lineStyle: { - color: '#cccccc', + color: 'var(--bs-border-color-subtle, #cccccc)', }, }, }, @@ -65,17 +65,17 @@ export const LIGHT_LINES_AXIS = { axisLine: { show: true, lineStyle: { - color: '#cccccc', + color: 'var(--bs-border-color-subtle, #cccccc)', }, }, axisLabel: { show: true, - color: '#000000', + color: 'var(--bs-body-color, #000000)', }, axisTick: { show: false, lineStyle: { - color: '#cccccc', + color: 'var(--bs-border-color-subtle, #cccccc)', }, }, }, diff --git a/src/theme/ods-chart-theme.ts b/src/theme/ods-chart-theme.ts index 2ec8e2cb..188e157e 100644 --- a/src/theme/ods-chart-theme.ts +++ b/src/theme/ods-chart-theme.ts @@ -446,33 +446,33 @@ export class ODSChartsTheme { fontWeight: '700', fontSize: 14, fontFamily: 'Helvetica Neue, sans-serif', - color: ODSChartsMode.LIGHT === this.options.mode ? 'rgba(0, 0, 0, 1)' : '#FFFFFF', + color: ODSChartsMode.LIGHT === this.options.mode ? 'var(--bs-body-color, #000000)' : '#ffffff', }; const axisLine = { show: true, lineStyle: { width: 2, - color: ODSChartsMode.LIGHT === this.options.mode ? '#CCCCCC' : '#666666', + color: ODSChartsMode.LIGHT === this.options.mode ? 'var(--bs-border-color-subtle, #cccccc)' : '#666666', }, }; const splitLine = { show: true, lineStyle: { width: 1, - color: ODSChartsMode.LIGHT === this.options.mode ? '#CCCCCC' : '#666666', + color: ODSChartsMode.LIGHT === this.options.mode ? 'var(--bs-border-color-subtle, #cccccc)' : '#666666', }, }; const legend = { textStyle: { fontWeight: 'bold', fontSize: 14, - color: ODSChartsMode.LIGHT === this.options.mode ? '#000000' : '#FFFFFF', + color: ODSChartsMode.LIGHT === this.options.mode ? 'var(--bs-body-color, #000000)' : '#ffffff', }, icon: 'rect', itemWidth: 10, itemHeight: 10, itemStyle: { - borderColor: ODSChartsMode.LIGHT === this.options.mode ? '#000000' : '#FFFFFF', + borderColor: ODSChartsMode.LIGHT === this.options.mode ? 'var(--bs-body-color, #000000)' : '#ffffff', borderWidth: 1, }, }; diff --git a/src/theme/popover/ods-chart-popover.ts b/src/theme/popover/ods-chart-popover.ts index 60ee016e..5b9d818c 100644 --- a/src/theme/popover/ods-chart-popover.ts +++ b/src/theme/popover/ods-chart-popover.ts @@ -36,13 +36,13 @@ const DEFAULT_TEMPLATE_CSS = ` .ods-charts-popover .ods-charts-popover-inner { display: inline-block; - background-color: white; - border: 2px solid rgb(204, 204, 204); + background-color: var(--bs-body-bg, #ffffff); + border: 2px solid var(--bs-border-color-subtle, rgb(204, 204, 204)); padding: 20px 18px 20px 18px; } .ods-charts-popover .ods-charts-popover-header { - color: black; + color: var(--bs-body-color, #000000); font-size: 18px; font-weight: 700; padding-bottom:10px; @@ -62,7 +62,7 @@ const DEFAULT_TEMPLATE_CSS = ` display: block; content: ""; border-color: transparent; - border-top-color: rgb(204, 204, 204); + border-top-color: var(--bs-border-color-subtle, rgb(204, 204, 204)); border-width: 10px; border-bottom-width: 0px; border-style: solid; @@ -71,7 +71,7 @@ const DEFAULT_TEMPLATE_CSS = ` } .ods-charts-popover .ods-charts-popover-arrow::after { border-color: transparent; - border-top-color: white; + border-top-color: var(--bs-body-bg, #ffffff); border-width: 10px; border-bottom-width: 0px; position: absolute; @@ -85,7 +85,7 @@ const DEFAULT_TEMPLATE_CSS = ` const DEFAULT_NONE_CSS = ` .ods-charts-no-css-lib .ods-charts-popover-color-holder { - border: 1px solid #000; + border: 1px solid var(--bs-body-color, #000000); display: inline-block; } @@ -100,7 +100,7 @@ const DEFAULT_NONE_CSS = ` font-weight: 700; font-size: 16px; line-height: 24px; - color: black; + color: var(--bs-body-color, #000000); } `;