@bagelink/vue 0.0.25 → 0.0.35

package/src/components/charts/BarChart.vue

@@ -0,0 +1,316 @@
+<template>
+	<div class="bar-chart">
+		<div
+			class="graph-wrap"
+			v-for="(item, i) in dataArray"
+			:key="i"
+		>
+			<div
+				class="group-wrap"
+				v-if="item.group"
+			>
+				<p class="group-title">
+					{{ item.group }}
+				</p>
+				<div
+					v-for="(nested, i) in item?.data || []"
+					:key="i"
+					class="bar-wrap"
+				>
+					<div
+						class="bar"
+						:style="{ height: loaded ? `${percent(nested.value)}%` : '0' }"
+					/>
+					<div
+						class="bar compare"
+						v-if="nested.compareValue"
+						:style="{
+							height: loaded ? `${percent(nested.compareValue)}%` : '0',
+						}"
+					/>
+					<!-- <p class="bar-txt">{{ nested.title }}</p> -->
+				</div>
+			</div>
+			<div
+				v-else
+				class="bar-wrap"
+			>
+				<div
+					class="bar"
+					:style="{ height: loaded ? `${percent(item.value)}%` : '0' }"
+				/>
+				<div
+					class="bar compare"
+					v-if="item?.compareValue"
+					:style="{ height: loaded ? `${percent(item.compareValue)}%` : '0' }"
+				/>
+				<p class="bar-txt">
+					{{ item.title }}
+				</p>
+			</div>
+		</div>
+		<p class="factor">
+			{{ title }}
+		</p>
+		<div class="red-bar" />
+		<div class="bar-lines">
+			<p
+				v-for="mark in marks"
+				:key="mark"
+			>
+				{{ mark.toLocaleString() }}
+			</p>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+
+const props = defineProps<{
+	title?: string;
+	showMarks?: boolean;
+	flood?: number;
+	modelValue: {
+		value: number;
+		title?: string;
+		compareValue?: number;
+		group?: string;
+		data?: Record<string, any>[];
+	}[];
+	// | {
+	//   group: string;
+	//   data: {
+	//     value: number;
+	//     title: string;
+	//     compareValue?: number | undefined;
+	//     group?: string | undefined;
+	//     data?: Record<string, any>[] | undefined;
+	//   }[]
+	// }[]
+}>();
+const loaded = ref(false);
+
+onMounted(() => {
+	setTimeout(() => {
+		loaded.value = true;
+	}, 400);
+});
+
+const dataArray = computed(
+	() => props.modelValue,
+	// const allData = []
+	// for (const item of props.modelValue) {
+	//   if (item.group) {
+	//     let groupIndex = allData.findIndex(d => d.group === item.group)
+	//     if (groupIndex > -1) allData[groupIndex].data?.push(item);
+	//     else allData.push({ group: item.group, data: [item] })
+	//   } else {
+	//     allData.push(item)
+	//   }
+	// }
+	// return allData;
+);
+
+const maxValue = computed(() => Math.ceil(
+	Math.max(
+		...dataArray.value.map((d) => d.value),
+		...dataArray.value.map((d) => d?.compareValue || 0),
+	),
+));
+
+const marks = computed(() => {
+	const marksArray: number[] = [];
+	for (let i = 0; i <= 5; i += 1) {
+		const step = (i * maxValue.value) / 5;
+		marksArray.push(Math.round(step / 10) * 10);
+	}
+	return marksArray;
+});
+
+const percent = (val: number) => (val / maxValue.value) * 100;
+const floodPercent = computed(() => `${props.flood}%`);
+</script>
+
+<style scoped>
+/* .group-wrap * {
+  outline: 1px solid red;
+} */
+
+.group-wrap {
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-wrap: wrap;
+	gap: 2px;
+}
+
+.group-wrap .bar-wrap {
+	gap: 2px;
+}
+
+.group-title {
+	font-size: 0.6em;
+	width: 100%;
+}
+
+.bar-txt {
+	font-size: 11px;
+	font-weight: 200;
+	/* max-width: 95%; */
+	width: max-content;
+	height: 20px;
+	line-height: 1.2;
+	margin: 5px auto 0;
+	position: absolute;
+	transform: rotate(300deg);
+	transform-origin: 40px 40px;
+}
+
+.graph-wrap {
+	display: flex;
+	flex-direction: row;
+	align-items: flex-end;
+	padding: 0 10px;
+}
+
+.bar-wrap {
+	text-align: center;
+	height: 100%;
+	/* flex: 0 1 16.6%; */
+	display: flex;
+	flex-direction: row;
+	align-items: flex-end;
+	position: relative;
+}
+
+.bar {
+	background: var(--bgl-blue);
+	position: relative;
+	min-width: 10px;
+	min-height: 5px;
+	width: 4px;
+	margin: 0 auto;
+	transition: all ease-out 0.8s;
+}
+
+.bar.compare {
+	background-color: #cf2135;
+}
+
+.bar-chart {
+	height: calc(100vh - 500px);
+	width: 90%;
+	margin: 30px auto;
+	display: flex;
+	justify-content: space-between;
+	position: relative;
+}
+
+.graps .bar-chart {
+	aspect-ratio: 9/5;
+	height: auto;
+	max-height: calc(100vh - 500px);
+}
+
+.bar-lines {
+	position: absolute;
+	/* font-size: 20px; */
+	display: flex;
+	flex-direction: column-reverse;
+	top: -15px;
+	bottom: -12px;
+	left: -30px;
+	justify-content: space-between;
+	width: calc(100% + 20px);
+	text-align: start;
+}
+
+.bar-lines p {
+	margin: 0;
+	position: relative;
+}
+
+.bar-lines p::after {
+	content: "";
+	background: var(--bgl-blue-tint);
+	height: 1px;
+	position: absolute;
+	width: calc(100% - 20px);
+	margin: 14px 0 0 10px;
+	opacity: 0.5;
+}
+
+.bar-lines p:first-child:after {
+	content: "";
+	background: var(--bgl-blue-tint);
+	height: 1px;
+	position: absolute;
+	width: calc(100% - 10px);
+	margin: 8px 0 0 10px;
+	opacity: 0.5;
+}
+
+.red-bar {
+	background: #cf2135;
+	height: v-bind(floodPercent);
+	width: 100%;
+	position: absolute;
+	left: 0px;
+	bottom: 0;
+	opacity: 0.6;
+	transition: all 200ms ease;
+}
+
+.red-bar.open-redbar {
+	height: 7%;
+}
+
+.factor {
+	position: absolute;
+	transform: rotate(270deg);
+	height: 0px;
+	width: 0;
+	left: -60px;
+	font-size: 22px;
+	text-align: center;
+	white-space: nowrap;
+	top: 60%;
+}
+
+.dash-hor {
+	/* border-bottom: 1px dashed white; */
+	position: absolute;
+	background-image: linear-gradient(to right, #cf2134 53%, transparent 0%);
+	height: 10px;
+	bottom: 41.5%;
+	width: 100%;
+	animation: 1s linear 0s infinite dash;
+	background-position: left;
+	background-repeat: repeat-x;
+	background-size: 15px 4px;
+}
+
+.dash-hor::after {
+	content: "Average Speedup = 25x";
+	position: absolute;
+	left: 0;
+	bottom: 10px;
+	font-size: 22px;
+	background: #cf2134;
+	z-index: 2;
+	padding: 1px 4px;
+	border-radius: 3px;
+}
+
+@keyframes dash {
+	0% {
+		background-position: 0;
+	}
+
+	100% {
+		background-position: 15px;
+	}
+}
+</style>

package/src/components/dashboard/Lineart.vue

@@ -0,0 +1,197 @@
+<template>
+	<div
+		ref="chartContainer"
+		class="chart-line"
+	>
+		<Chart
+			v-if="chartSize"
+			:size="chartSize"
+			:data="data"
+			:margin="chartMargin"
+			:axis="axisConfig"
+		>
+			<template #layers>
+				<Grid
+					:center="true"
+					strokeDasharray="2,2"
+					:hideY="true"
+				/>
+				<Area
+					aria-label="Profit/Loss"
+					:dataKeys="['date', 'total_value']"
+					type="monotone"
+					:areaStyle="{ fill: 'url(#grad)' }"
+				/>
+				<Line
+					:dataKeys="['date', 'total_value']"
+					type="monotone"
+					:dotStyle="dotStyling"
+					:lineStyle="{ stroke: BRAND_COLOR, r: 2 }"
+				/>
+				<Marker
+					v-if="displayMarker"
+					:value="meanValue"
+					label="ממוצע"
+					:color="BRAND_COLOR"
+					:strokeWidth="2"
+					strokeDasharray="6 6"
+				/>
+				<defs>
+					<linearGradient
+						id="grad"
+						gradientTransform="rotate(90)"
+					>
+						<stop
+							offset="0%"
+							:stop-color="BRAND_COLOR"
+							stop-opacity="1"
+						/>
+						<stop
+							offset="100%"
+							stop-color="white"
+							stop-opacity="0.4"
+						/>
+					</linearGradient>
+				</defs>
+			</template>
+			<template #widgets>
+				<Tooltip
+					color="white"
+					:config="tooltipConfiguration"
+				/>
+			</template>
+		</Chart>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted } from 'vue';
+import {
+	Chart, Grid, Line, Area, Tooltip, Marker,
+} from 'vue3-charts';
+import type { ChartAxis, Data } from 'vue3-charts/dist/types';
+
+const props = defineProps<{ data: Data[], locale: string }>();
+
+const data = $computed(() => (props.locale === 'he' ? [...props.data].reverse() : props.data));
+
+interface Size {
+	width: number;
+	height: number;
+}
+
+// Computed properties
+const meanValue = $computed(() => {
+	const sum = props.data.reduce((acc, curr) => acc + +curr.total_value, 0);
+	return sum / props.data.length;
+});
+
+const axisConfig = $computed<ChartAxis>(() => ({
+	primary: {
+		type: 'band',
+		rotate: true,
+		ticks: 5,
+		domain: ['dataMin', 'dataMax'],
+		tickValues: props.data?.length > 100 ? [''] : props.data.map((d: any) => d.date),
+	},
+	secondary: {
+		domain: ['dataMin', 'dataMax * 1.05'],
+		type: 'linear',
+		ticks: 8,
+	},
+}));
+
+// Constants
+const BRAND_COLOR = 'var(--bgl-blue)';
+
+const tooltipConfiguration = {
+	date: { label: 'תאריך' },
+	total_value: { color: BRAND_COLOR, label: 'סכום', format: (v: number) => `₪${v.toLocaleString()}` },
+	total_count: { label: 'מספר התרומות', format: (v: number) => `${v.toLocaleString()}` },
+};
+
+// Refs
+let chartSize = $ref<Size | null>(null);
+const chartContainer = $ref<HTMLElement>();
+const displayMarker = $ref(true);
+const chartMargin = $ref({
+	left: 0,
+	top: 0,
+	right: 0,
+	bottom: 0,
+});
+
+// Functions
+const adjustChartSize = () => {
+	chartSize = null;
+	const el = chartContainer;
+	if (!el) return;
+	const { width, height } = el.getBoundingClientRect();
+	chartSize = { width: width - 5, height: height - 10 };
+	console.log(chartSize);
+};
+
+const handleResize = () => {
+	setTimeout(adjustChartSize, 300);
+};
+
+// Lifecycle hooks
+onMounted(() => {
+	adjustChartSize();
+	window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+	window.removeEventListener('resize', handleResize);
+});
+
+// Style Configurations
+const dotStyling = (ctx: Record<string, any>) => ({
+	r: ctx.active ? 5 : 1,
+	fill: BRAND_COLOR,
+});
+</script>
+
+<style>
+.chart-line {
+	width: 100%;
+	height: 300px;
+}
+
+[dir='rtl'] .chart-line {
+	direction: ltr;
+}
+
+.chart-line .v-tooltip-content>div {
+	border: none !important;
+	border-radius: 6px !important;
+	background-color: black !important;
+	opacity: 0.7;
+	padding: 0.5rem 1rem !important;
+	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+	font-weight: 300;
+}
+
+.chart-line .v-tooltip-content>div b {
+	font-weight: 400;
+}
+
+.layer-grid g:last-child {
+	display: none;
+}
+
+.layer-axis-x .tick:nth-child(2n + 1) {
+	opacity: 0;
+}
+
+@media screen and (max-width: 910px) {
+	.chart-line {
+		height: 140px;
+	}
+
+	.layer-axis-x .tick {
+		opacity: 0;
+		font-size: 0;
+	}
+}
+</style>

package/src/components/form/ItemRef.vue

@@ -0,0 +1,45 @@
+<template>
+	<div>
+		{{ field.label || field.id }}
+
+		<Btn
+			color="gray"
+			@click="openModal()"
+			v-if="field.refCollection"
+		>
+			{{ content }}
+			<MaterialIcon icon="arrow_forward" />
+		</Btn>
+		<span
+			v-else
+			class="pill"
+		>
+			{{ content }}
+		</span>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import type { BagelField } from '@/types';
+import { Btn, MaterialIcon } from '@/components';
+
+const router = useRouter();
+// import Modal from '@/components/Modal.vue';
+
+const openRef = ref(false);
+
+const props = defineProps<{
+	modelValue: Record<string, any>;
+	field: BagelField;
+}>();
+
+const content = computed(() => props.field.refFields?.map((k) => props.modelValue?.[k] || '').join(' '));
+
+const openModal = () => {
+	console.log(`openning ${props.modelValue?.id}`);
+	openRef.value = true;
+	void router.push(`/${props.field.refCollection}/${props.modelValue?.id}`);
+};
+</script>

package/src/components/form/MaterialIcon.vue

@@ -0,0 +1,19 @@
+<template>
+	<div
+		class="icon-font"
+		:style="{ fontSize: `${size}rem` }"
+	>
+		{{ icon }}
+	</div>
+</template>
+
+<script setup lang="ts">
+import { MaterialIcons } from '@/types/materialIcons';
+
+defineProps<{
+	icon: MaterialIcons
+	size?: number
+}>();
+</script>
+
+<style scoped></style>

package/src/components/form/PlainInputField.vue

@@ -0,0 +1,79 @@
+<template>
+	<div class="bagel-input">
+		<label :for="formatString(name, 'pascal')">
+			<LangText :input="formatString(name, 'titleCase')" />
+		</label>
+		<input
+			v-if="type === 'checkbox'"
+			ref="el"
+			:checked="modelValue"
+			class="ctl"
+			type="checkbox"
+			@change="handleCheck"
+		>
+		<input
+			v-else-if="type === 'number'"
+			ref="el"
+			:name="formatString(name, 'pascal')"
+			:type="type"
+			:value="modelValue"
+			class="ctl"
+			@input="handleInput"
+		>
+		<input
+			v-else-if="type === 'text'"
+			ref="el"
+			:name="formatString(name, 'pascal')"
+			:type="type"
+			:value="modelValue"
+			class="ctl"
+			@input="handleInput"
+		>
+		<textarea
+			v-else-if="type === 'textarea'"
+			ref="el"
+			:name="formatString(name, 'pascal')"
+			:type="type"
+			:value="modelValue"
+			class="ctl"
+			@input="handleInput"
+		/>
+		<div>
+			<LangText :input="errorMessage" />
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import LangText from '../translation/LangText.vue';
+import { formatString } from '@/utils/strings';
+
+const props = defineProps<{
+	type: 'text' | 'number' | 'password' | 'email' | 'checkbox' | 'textarea';
+	name: string;
+	value?: any;
+	modelValue: any;
+	errorMessage?: string;
+	focus?: boolean;
+}>();
+
+const emits = defineEmits(['update:modelValue']);
+const el = ref<HTMLInputElement | null>(null);
+const handleInput = (e: Event) => {
+	const el = e.target as HTMLInputElement;
+	emits('update:modelValue', el.value);
+};
+const handleCheck = (e: Event) => {
+	const el = e.target as HTMLInputElement;
+	emits('update:modelValue', el.checked ? 1 : 0);
+};
+onMounted(() => {
+	if (props.focus) {
+		el.value?.focus();
+	}
+});
+</script>
+
+<style scoped></style>