cardamon 0.0.1

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

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

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

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

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

const props = defineProps<ChartProps>();

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

const computedChartOptions = computed(() => {
    const baseOptions: ChartOptions<'bar'> = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: true,
                position: 'top',
                labels: {
                    color: darkMode.value ? 'white' : 'black' // Adjust legend text color
                }
            },
            tooltip: {
                enabled: true,
                backgroundColor: darkMode.value ? 'rgba(255, 255, 255, 0.8)' : 'rgba(0, 0, 0, 0.8)', // Adjust tooltip background color
                titleColor: darkMode.value ? 'black' : 'white', // Adjust tooltip title color
                bodyColor: darkMode.value ? 'black' : 'white' // Adjust tooltip body color
            },
            title: {
                display: true,
                text: 'Bar Chart',
                color: darkMode.value ? 'white' : 'black' // Adjust title color
            }
        },
        scales: {
            x: {
                ticks: {
                    color: darkMode.value ? 'white' : 'black' // Adjust x-axis tick color
                },
                grid: {
                    color: darkMode.value ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)' // Adjust x-axis grid color
                }
            },
            y: {
                ticks: {
                    color: darkMode.value ? 'white' : 'black' // Adjust y-axis tick color
                },
                grid: {
                    color: darkMode.value ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)' // Adjust y-axis grid color
                }
            }
        },
        interaction: {
            mode: 'nearest',
            axis: 'x',
            intersect: false,
        },
    };

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