natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

🎨

This commit is contained in:
syuilo 2022-02-08 22:36:07 +09:00
parent d050d5fb18
commit e9190599ca
3 changed files with 20 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/client/package.json
View File

@ -45,6 +45,7 @@
"broadcast-channel": "4.9.0", "broadcast-channel": "4.9.0",
"chart.js": "3.7.0", "chart.js": "3.7.0",
"chartjs-adapter-date-fns": "2.0.0", "chartjs-adapter-date-fns": "2.0.0",
"chartjs-plugin-gradient": "0.2.1",
"chartjs-plugin-zoom": "1.2.0", "chartjs-plugin-zoom": "1.2.0",
"compare-versions": "4.1.3", "compare-versions": "4.1.3",
"content-disposition": "0.5.4", "content-disposition": "0.5.4",

14
packages/client/src/components/chart.vue
View File

@ -29,6 +29,7 @@ import {
import 'chartjs-adapter-date-fns'; import 'chartjs-adapter-date-fns';
import { enUS } from 'date-fns/locale'; import { enUS } from 'date-fns/locale';
import zoomPlugin from 'chartjs-plugin-zoom'; import zoomPlugin from 'chartjs-plugin-zoom';
import gradient from 'chartjs-plugin-gradient';
import * as os from '@/os'; import * as os from '@/os';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import MkChartTooltip from '@/components/chart-tooltip.vue'; import MkChartTooltip from '@/components/chart-tooltip.vue';
@ -49,6 +50,7 @@ Chart.register(
SubTitle, SubTitle,
Filler, Filler,
zoomPlugin, zoomPlugin,
gradient,
); );
const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b)); 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'); 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, { chartInstance = new Chart(chartEl.value, {
type: props.bar ? 'bar' : 'line', type: props.bar ? 'bar' : 'line',
data: { data: {
@ -206,6 +210,15 @@ export default defineComponent({
borderDash: x.borderDash || [], borderDash: x.borderDash || [],
borderJoinStyle: 'round', borderJoinStyle: 'round',
backgroundColor: alpha(x.color ? x.color : getColor(i), 0.1), 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, barPercentage: 0.9,
categoryPercentage: 0.9, categoryPercentage: 0.9,
fill: x.type === 'area', fill: x.type === 'area',
@ -312,6 +325,7 @@ export default defineComponent({
}, },
} }
}, },
gradient,
}, },
}, },
plugins: [{ plugins: [{

5
packages/client/yarn.lock
View File

@ -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" resolved "https://registry.yarnpkg.com/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-2.0.0.tgz#5e53b2f660b993698f936f509c86dddf9ed44c6b"
integrity sha512-rmZINGLe+9IiiEB0kb57vH3UugAtYw33anRiw5kS2Tu87agpetDDoouquycWc9pRsKtQo5j+vLsYHyr8etAvFw== 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: chartjs-plugin-zoom@1.2.0:
version "1.2.0" version "1.2.0"
resolved "https://registry.yarnpkg.com/chartjs-plugin-zoom/-/chartjs-plugin-zoom-1.2.0.tgz#dad0861b2d171bca1f6d11b3e3e917bc12b950ff" resolved "https://registry.yarnpkg.com/chartjs-plugin-zoom/-/chartjs-plugin-zoom-1.2.0.tgz#dad0861b2d171bca1f6d11b3e3e917bc12b950ff"