mirrors/homebox
1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2025-07-01 16:18:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix/feat: primary photo auto set and auto-set primary photo (#651)

Browse source 
* fix error when item doesn't have photo attachment

* automatically detect image types and set primary photo if first

* remove charts.js from libs

Former-commit-id: 321a83b634
This commit is contained in:
Hayden 2023-12-01 11:57:29 -06:00 • committed by GitHub
parent bd1a241be1
commit 81e76d9dd4
13 changed files with 41 additions and 424 deletions
Download patch file Download diff file Expand all files Collapse all files

94
frontend/components/Chart/Donut.vue
View file

@ -1,94 +0,0 @@
<template>
<DoughnutChart
:chart-options="chartOptions"
:chart-data="chartData"
:chart-id="chartId"
:dataset-id-key="datasetIdKey"
:css-classes="cssClasses"
:styles="styles"
:width="width"
:height="height"
/>
</template>
<script lang="ts">
import { Doughnut as DoughnutChart } from "vue-chartjs";
import { Chart as ChartJS, Title, Tooltip, Legend, CategoryScale, LinearScale, ArcElement } from "chart.js";
import { TChartData } from "vue-chartjs/dist/types";
ChartJS.register(Title, Tooltip, Legend, CategoryScale, LinearScale, ArcElement);
export default defineComponent({
name: "BarChart",
components: {
DoughnutChart,
},
props: {
chartId: {
type: String,
default: "bar-chart",
},
datasetIdKey: {
type: String,
default: "label",
},
width: {
type: Number,
default: 400,
},
height: {
type: Number,
default: 400,
},
cssClasses: {
default: "",
type: String,
},
styles: {
type: Object,
default: () => {
return {};
},
},
chartData: {
type: Object as () => TChartData<"doughnut", number[], unknown>,
default: () => {
return {
labels: ["Red", "Blue", "Yellow"],
datasets: [
{
label: "My First Dataset",
data: [300, 50, 100],
backgroundColor: ["rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)"],
hoverOffset: 4,
},
],
};
},
},
},
data() {
return {
chartOptions: {
responsive: false,
// Legend on the left
plugins: {
legend: {
position: "bottom",
},
// Display percentage
// tooltip: {
// callbacks: {
// label: context => {
// const label = context.dataset?.label || "";
// const value = context.parsed.y;
// return `${label}: ${value}%`;
// },
// },
// },
},
},
};
},
});
</script>

113
frontend/components/Chart/Line.vue
View file

@ -1,113 +0,0 @@
<template>
<div ref="el" class="min-h-full flex flex-col">
{{ styles }}
<LineChart :chart-options="options" :chart-data="chartData" :styles="styles" />
</div>
</template>
<script lang="ts">
import { Line as LineChart } from "vue-chartjs";
import {
Chart as ChartJS,
PointElement,
Title,
Tooltip,
Legend,
CategoryScale,
LinearScale,
LineElement,
} from "chart.js";
import { TChartData } from "vue-chartjs/dist/types";
ChartJS.register(Title, Tooltip, Legend, CategoryScale, LinearScale, PointElement, LineElement);
export default defineComponent({
name: "BarChart",
components: {
LineChart,
},
props: {
chartId: {
type: String,
default: "bar-chart",
},
datasetIdKey: {
type: String,
default: "label",
},
cssClasses: {
default: "",
type: String,
},
chartData: {
type: Object as () => TChartData<"line", number[], unknown>,
default: () => {
return {
labels: ["January", "February", "March"],
datasets: [{ data: [40, 20, 12] }],
};
},
},
},
setup() {
const el = ref<HTMLElement | null>(null);
const calcHeight = ref(0);
const calcWidth = ref(0);
function resize() {
calcHeight.value = el.value?.offsetHeight || 0;
calcWidth.value = el.value?.offsetWidth || 0;
}
onMounted(() => {
resize();
window.addEventListener("resize", resize);
});
onUnmounted(() => {
window.removeEventListener("resize", resize);
});
const styles = computed(() => {
return {
height: `${calcHeight.value}px`,
width: `${calcWidth.value}px`,
position: "relative",
};
});
return {
el,
parentHeight: calcHeight,
styles,
};
},
data() {
return {
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
display: false,
},
y: {
display: true,
},
},
elements: {
line: {
borderWidth: 5,
},
point: {
radius: 4,
},
},
},
};
},
});
</script>
<style></style>