chore(client): tweak charts
This commit is contained in:
parent
3e7d8b5f17
commit
e36e5df635
7 changed files with 14 additions and 29 deletions
|
@ -16,7 +16,6 @@
|
||||||
*/
|
*/
|
||||||
import { onMounted, ref, shallowRef, watch, PropType, onUnmounted } from 'vue';
|
import { onMounted, ref, shallowRef, watch, PropType, onUnmounted } from 'vue';
|
||||||
import { Chart } from 'chart.js';
|
import { Chart } from 'chart.js';
|
||||||
import { enUS } from 'date-fns/locale';
|
|
||||||
import gradient from 'chartjs-plugin-gradient';
|
import gradient from 'chartjs-plugin-gradient';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import { defaultStore } from '@/store';
|
import { defaultStore } from '@/store';
|
||||||
|
@ -186,6 +185,10 @@ const render = () => {
|
||||||
time: {
|
time: {
|
||||||
stepSize: 1,
|
stepSize: 1,
|
||||||
unit: props.span === 'day' ? 'month' : 'day',
|
unit: props.span === 'day' ? 'month' : 'day',
|
||||||
|
displayFormats: {
|
||||||
|
day: 'M/d',
|
||||||
|
month: 'Y/M',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
},
|
},
|
||||||
|
@ -194,11 +197,6 @@ const render = () => {
|
||||||
maxRotation: 0,
|
maxRotation: 0,
|
||||||
autoSkipPadding: 16,
|
autoSkipPadding: 16,
|
||||||
},
|
},
|
||||||
adapters: {
|
|
||||||
date: {
|
|
||||||
locale: enUS,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
min: getDate(props.limit).getTime(),
|
min: getDate(props.limit).getTime(),
|
||||||
},
|
},
|
||||||
y: {
|
y: {
|
||||||
|
|
|
@ -10,7 +10,6 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
|
import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
|
||||||
import { Chart } from 'chart.js';
|
import { Chart } from 'chart.js';
|
||||||
import { enUS } from 'date-fns/locale';
|
|
||||||
import tinycolor from 'tinycolor2';
|
import tinycolor from 'tinycolor2';
|
||||||
import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
|
import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
|
@ -149,7 +148,9 @@ async function renderChart() {
|
||||||
round: 'week',
|
round: 'week',
|
||||||
isoWeekday: 0,
|
isoWeekday: 0,
|
||||||
displayFormats: {
|
displayFormats: {
|
||||||
week: 'MMM dd',
|
day: 'M/d',
|
||||||
|
month: 'Y/M',
|
||||||
|
week: 'M/d',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
|
|
|
@ -10,7 +10,6 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||||
import { Chart } from 'chart.js';
|
import { Chart } from 'chart.js';
|
||||||
import { enUS } from 'date-fns/locale';
|
|
||||||
import tinycolor from 'tinycolor2';
|
import tinycolor from 'tinycolor2';
|
||||||
import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
|
import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
|
|
|
@ -10,7 +10,6 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||||
import { Chart } from 'chart.js';
|
import { Chart } from 'chart.js';
|
||||||
import { enUS } from 'date-fns/locale';
|
|
||||||
import tinycolor from 'tinycolor2';
|
import tinycolor from 'tinycolor2';
|
||||||
import gradient from 'chartjs-plugin-gradient';
|
import gradient from 'chartjs-plugin-gradient';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
|
@ -114,11 +113,6 @@ async function renderChart() {
|
||||||
maxRotation: 0,
|
maxRotation: 0,
|
||||||
autoSkipPadding: 8,
|
autoSkipPadding: 8,
|
||||||
},
|
},
|
||||||
adapters: {
|
|
||||||
date: {
|
|
||||||
locale: enUS,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
y: {
|
y: {
|
||||||
position: 'left',
|
position: 'left',
|
||||||
|
|
|
@ -18,7 +18,6 @@
|
||||||
import { onMounted, onUnmounted, ref } from 'vue';
|
import { onMounted, onUnmounted, ref } from 'vue';
|
||||||
import { Chart } from 'chart.js';
|
import { Chart } from 'chart.js';
|
||||||
import gradient from 'chartjs-plugin-gradient';
|
import gradient from 'chartjs-plugin-gradient';
|
||||||
import { enUS } from 'date-fns/locale';
|
|
||||||
import tinycolor from 'tinycolor2';
|
import tinycolor from 'tinycolor2';
|
||||||
import MkMiniChart from '@/components/MkMiniChart.vue';
|
import MkMiniChart from '@/components/MkMiniChart.vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
|
@ -135,11 +134,6 @@ onMounted(async () => {
|
||||||
maxRotation: 0,
|
maxRotation: 0,
|
||||||
autoSkipPadding: 16,
|
autoSkipPadding: 16,
|
||||||
},
|
},
|
||||||
adapters: {
|
|
||||||
date: {
|
|
||||||
locale: enUS,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
min: getDate(chartLimit).getTime(),
|
min: getDate(chartLimit).getTime(),
|
||||||
},
|
},
|
||||||
y: {
|
y: {
|
||||||
|
|
|
@ -10,7 +10,6 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
|
import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
|
||||||
import { Chart } from 'chart.js';
|
import { Chart } from 'chart.js';
|
||||||
import { enUS } from 'date-fns/locale';
|
|
||||||
import tinycolor from 'tinycolor2';
|
import tinycolor from 'tinycolor2';
|
||||||
import * as misskey from 'misskey-js';
|
import * as misskey from 'misskey-js';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
|
@ -138,7 +137,9 @@ async function renderChart() {
|
||||||
round: 'week',
|
round: 'week',
|
||||||
isoWeekday: 0,
|
isoWeekday: 0,
|
||||||
displayFormats: {
|
displayFormats: {
|
||||||
week: 'MMM dd',
|
day: 'M/d',
|
||||||
|
month: 'Y/M',
|
||||||
|
week: 'M/d',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
|
|
|
@ -11,7 +11,6 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||||
import { Chart } from 'chart.js';
|
import { Chart } from 'chart.js';
|
||||||
import { enUS } from 'date-fns/locale';
|
|
||||||
import tinycolor from 'tinycolor2';
|
import tinycolor from 'tinycolor2';
|
||||||
import * as misskey from 'misskey-js';
|
import * as misskey from 'misskey-js';
|
||||||
import gradient from 'chartjs-plugin-gradient';
|
import gradient from 'chartjs-plugin-gradient';
|
||||||
|
@ -113,6 +112,10 @@ async function renderChart() {
|
||||||
time: {
|
time: {
|
||||||
stepSize: 1,
|
stepSize: 1,
|
||||||
unit: 'day',
|
unit: 'day',
|
||||||
|
displayFormats: {
|
||||||
|
day: 'M/d',
|
||||||
|
month: 'Y/M',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
display: false,
|
display: false,
|
||||||
|
@ -122,11 +125,6 @@ async function renderChart() {
|
||||||
maxRotation: 0,
|
maxRotation: 0,
|
||||||
autoSkipPadding: 8,
|
autoSkipPadding: 8,
|
||||||
},
|
},
|
||||||
adapters: {
|
|
||||||
date: {
|
|
||||||
locale: enUS,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
y: {
|
y: {
|
||||||
position: 'left',
|
position: 'left',
|
||||||
|
|
Loading…
Reference in a new issue