cardamon 0.0.2

Cardamon is a tool to help development teams measure the power consumption and carbon emissions of their software.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<template>
    <Pie :data="chartData" :options="computedChartOptions" />
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue';
import { Pie } from 'vue-chartjs';
import {
    Chart as ChartJS,
    Title,
    Tooltip,
    Legend,
    PointElement,
    ArcElement,
    LinearScale,
    CategoryScale,
    type ChartData,
    type ChartOptions
} from 'chart.js';
import { useThemeStore } from '@/stores/theme';

ChartJS.register(Title, Tooltip, Legend, PointElement, ArcElement, LinearScale, CategoryScale);

interface ChartProps {
    chartData: ChartData<'pie'>;
    chartOptions: ChartOptions<'pie'>;
}

const props = defineProps<ChartProps>();

const themeStore = useThemeStore();
const darkMode = computed(() => themeStore.darkMode);

const computedChartOptions = computed(() => {
    const baseOptions: ChartOptions<'pie'> = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: true,
                position: 'right',
                labels: {
                    color: darkMode.value ? 'white' : 'black'
                }
            },
            tooltip: {
                enabled: true,
                backgroundColor: darkMode.value ? 'rgba(255, 255, 255, 0.8)' : 'rgba(0, 0, 0, 0.8)',
                titleColor: darkMode.value ? 'black' : 'white',
                bodyColor: darkMode.value ? 'black' : 'white'
            }
        },
        interaction: {
            mode: 'nearest',
            axis: 'x',
            intersect: false,
        },
    };

    return {
        ...props.chartOptions,
        ...baseOptions
    };
});
</script>