feat: color picker for line & bar charts

frappe · Oct 10, 2022 · 87820a5 · 87820a5
1 parent b91deae
commit 87820a5
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 5 deletions.
diff --git a/frontend/src/components/Controls/Color.vue b/frontend/src/components/Controls/Color.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<div class="mb-1 text-sm text-gray-600" v-if="label">
+		<div class="mb-1 text-sm text-gray-500" v-if="label">
 			{{ label }}
 		</div>
 		<Popover placement="bottom-start" class="w-full">
@@ -23,7 +23,7 @@
 										? value
 										: [value]"
 									:key="idx"
-									class="h-5 w-5 rounded-full"
+									class="h-4 w-4 rounded-full"
 									:style="{ backgroundColor: color }"
 								></div>
 							</div>
@@ -179,7 +179,11 @@ export default {
 			return this.options || Object.values(COLOR_MAP)
 		},
 		selectedColorLabel() {
-			return this.multiple ? this.modelValue.length + ' colors selected' : this.modelValue
+			return this.multiple
+				? this.modelValue.length > 1
+					? `${this.modelValue.length} colors`
+					: this.value[0]
+				: this.value
 		},
 	},
 }

diff --git a/frontend/src/components/Query/Visualize/BarChart.vue b/frontend/src/components/Query/Visualize/BarChart.vue
@@ -23,7 +23,7 @@ const props = defineProps({
 </script>
 
 <template>
-	<Chart :title="props.title" :subtitle="props.subtitle">
+	<Chart :title="props.title" :subtitle="props.subtitle" :color="props.options.colors">
 		<ChartGrid>
 			<ChartLegend type="scroll" bottom="bottom" />
 			<ChartAxis

diff --git a/frontend/src/components/Query/Visualize/BarChartOptions.vue b/frontend/src/components/Query/Visualize/BarChartOptions.vue
@@ -2,6 +2,7 @@
 import { inject } from 'vue'
 import Autocomplete from '@/components/Controls/Autocomplete.vue'
 import ListPicker from '@/components/Controls/ListPicker.vue'
+import Color from '@/components/Controls/Color.vue'
 
 const query = inject('query')
 const chart = inject('chart')
@@ -21,4 +22,11 @@ const chart = inject('chart')
 			@change="(options) => (chart.data.valueColumn = options)"
 		/>
 	</div>
+
+	<Color
+		label="Colors"
+		v-model="chart.options.colors"
+		:max="chart.data?.valueColumn?.length || 1"
+		multiple
+	/>
 </template>
diff --git a/frontend/src/components/Query/Visualize/LineChart.vue b/frontend/src/components/Query/Visualize/LineChart.vue
@@ -23,7 +23,7 @@ const props = defineProps({
 </script>
 
 <template>
-	<Chart :title="props.title" :subtitle="props.subtitle">
+	<Chart :title="props.title" :subtitle="props.subtitle" :color="props.options.colors">
 		<ChartGrid>
 			<ChartLegend type="scroll" bottom="bottom" />
 			<ChartAxis

diff --git a/frontend/src/components/Query/Visualize/LineChartOptions.vue b/frontend/src/components/Query/Visualize/LineChartOptions.vue
@@ -3,6 +3,7 @@ import { inject } from 'vue'
 import Checkbox from '@/components/Controls/Checkbox.vue'
 import Autocomplete from '@/components/Controls/Autocomplete.vue'
 import ListPicker from '@/components/Controls/ListPicker.vue'
+import Color from '@/components/Controls/Color.vue'
 
 const query = inject('query')
 const chart = inject('chart')
@@ -23,6 +24,13 @@ const chart = inject('chart')
 		/>
 	</div>
 
+	<Color
+		label="Colors"
+		v-model="chart.options.colors"
+		:max="chart.data?.valueColumn?.length || 1"
+		multiple
+	/>
+
 	<div class="space-y-2 text-gray-600">
 		<Checkbox v-model="chart.options.smoothLines" label="Enable Curved Lines" />
 	</div>