From e9190599ca10442f8272a4f0eac8c37bf5315d66 Mon Sep 17 00:00:00 2001 From: syuilo Date: Tue, 8 Feb 2022 22:36:07 +0900 Subject: [PATCH] :art: --- packages/client/package.json | 1 + packages/client/src/components/chart.vue | 14 ++++++++++++++ packages/client/yarn.lock | 5 +++++ 3 files changed, 20 insertions(+) diff --git a/packages/client/package.json b/packages/client/package.json index 355de401e..7bc74a1c1 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -45,6 +45,7 @@ "broadcast-channel": "4.9.0", "chart.js": "3.7.0", "chartjs-adapter-date-fns": "2.0.0", + "chartjs-plugin-gradient": "0.2.1", "chartjs-plugin-zoom": "1.2.0", "compare-versions": "4.1.3", "content-disposition": "0.5.4", diff --git a/packages/client/src/components/chart.vue b/packages/client/src/components/chart.vue index a273cc946..a0a4755d1 100644 --- a/packages/client/src/components/chart.vue +++ b/packages/client/src/components/chart.vue @@ -29,6 +29,7 @@ import { import 'chartjs-adapter-date-fns'; import { enUS } from 'date-fns/locale'; import zoomPlugin from 'chartjs-plugin-zoom'; +import gradient from 'chartjs-plugin-gradient'; import * as os from '@/os'; import { defaultStore } from '@/store'; import MkChartTooltip from '@/components/chart-tooltip.vue'; @@ -49,6 +50,7 @@ Chart.register( SubTitle, Filler, zoomPlugin, + gradient, ); const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b)); @@ -191,6 +193,8 @@ export default defineComponent({ // フォントカラー Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg'); + const maxes = data.series.map((x, i) => Math.max(...x.data.map(d => d.y))); + chartInstance = new Chart(chartEl.value, { type: props.bar ? 'bar' : 'line', data: { @@ -206,6 +210,15 @@ export default defineComponent({ borderDash: x.borderDash || [], borderJoinStyle: 'round', backgroundColor: alpha(x.color ? x.color : getColor(i), 0.1), + gradient: { + backgroundColor: { + axis: 'y', + colors: { + 0: alpha(x.color ? x.color : getColor(i), 0), + [maxes[i]]: alpha(x.color ? x.color : getColor(i), 0.1), + }, + }, + }, barPercentage: 0.9, categoryPercentage: 0.9, fill: x.type === 'area', @@ -312,6 +325,7 @@ export default defineComponent({ }, } }, + gradient, }, }, plugins: [{ diff --git a/packages/client/yarn.lock b/packages/client/yarn.lock index b1013c578..567024144 100644 --- a/packages/client/yarn.lock +++ b/packages/client/yarn.lock @@ -1579,6 +1579,11 @@ chartjs-adapter-date-fns@2.0.0: resolved "https://registry.yarnpkg.com/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-2.0.0.tgz#5e53b2f660b993698f936f509c86dddf9ed44c6b" integrity sha512-rmZINGLe+9IiiEB0kb57vH3UugAtYw33anRiw5kS2Tu87agpetDDoouquycWc9pRsKtQo5j+vLsYHyr8etAvFw== +chartjs-plugin-gradient@0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/chartjs-plugin-gradient/-/chartjs-plugin-gradient-0.2.1.tgz#9d6d4f1a04a8d2ffca769adb068df4d0678b8f8f" + integrity sha512-hcNQ+B0LuiK9QXhbEc0tUtW3s0a8lOBUJViOCw2xHbnNCIp3Pul/tQHR1aIjMo3HiHu4nOb7NKqFd4NTUEsi4Q== + chartjs-plugin-zoom@1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/chartjs-plugin-zoom/-/chartjs-plugin-zoom-1.2.0.tgz#dad0861b2d171bca1f6d11b3e3e917bc12b950ff"