Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | 2x 2x 2x 25x 23x 23x | <template>
<div class="splits-chart-container">
<div class="chart-header">
<h3 class="chart-title">
Split Results Over Time
</h3>
<div class="chart-legend-info">
<span class="legend-hint">Click legend items to show/hide lines</span>
</div>
</div>
<div
v-if="hasData"
class="chart-wrapper"
>
<Chart
type="line"
:data="chartData"
:options="chartOptions"
class="splits-line-chart"
/>
</div>
<div
v-else
class="chart-empty"
>
<p>No data available for chart visualization.</p>
</div>
</div>
</template>
<script setup>
import Chart from 'primevue/chart';
import { computed } from 'vue';
import {
getChartOptions,
transformToChartData,
} from '../utils/splitsChartUtils';
const props = defineProps({
splitResults: {
type: Array,
required: true,
default: () => [],
},
recipeWeights: {
type: Object,
default: null,
},
hasHoldout: {
type: Boolean,
default: true,
},
});
const hasData = computed(() => props.splitResults.length > 0);
const chartData = computed(() => transformToChartData(
props.splitResults,
props.recipeWeights,
props.hasHoldout,
));
const chartOptions = computed(() => getChartOptions());
</script>
<style lang="scss" scoped>
.splits-chart-container {
background: $white;
border: 1px solid $gray-4-color;
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid $gray-4-color;
}
.chart-title {
margin: 0;
font-size: 16px;
font-weight: 600;
color: $black;
}
.legend-hint {
font-size: 12px;
color: $gray-1-color;
font-style: italic;
}
.chart-wrapper {
height: 350px;
position: relative;
}
.splits-line-chart {
width: 100%;
height: 100%;
}
.chart-empty {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
color: $gray-1-color;
font-size: 14px;
}
</style>
|