mountain-ui 1.0.109 → 1.0.111

package/src/lib/registry/widgetTypeRegistry/widgetTypes/Bar/ConfigBar.svelte

@@ -0,0 +1,176 @@
+<script>
+	import { Button, DropdownMenu, Input, sendRequest } from 'hamzus-ui';
+	import { frequencyText, frequencyTextForConfig } from './text';
+	import { entityRegistry } from '$lib/registry/entityRegistry/registry.svelte';
+
+    let {id = null, save = () => {}} = $props()
+
+	let title = $state('');
+
+    const entities = entityRegistry.getAll()
+
+	let entityId = $state(null);
+	const entity = $derived(entityRegistry.get(entityId));
+
+	let frequency = $state('month'); // day | month | year
+	const frequencies = ['day', 'month', 'year'];
+
+	let valueFieldId = $state(null);
+	const valueField = $derived(entityRegistry.getField(valueFieldId));
+
+	let dateFieldId = $state(null);
+	const dateField = $derived(entityRegistry.getField(dateFieldId));
+	const dateFieldTypes = ['time-created_at', 'time-datetime', 'time-updated_at'];
+
+	let operation = 'count'; // count | sum | avg | min | max
+	const operations = ['count', 'sum', 'avg', 'min', 'max'];
+
+	function handleSelectEntity(entity) {
+		entityId = entity.id;
+
+		// parcourir les fields pour set auto le field de value et de date
+		for (const field of entity.fields) {
+			if (field.type.startsWith('number-') || field.type.startsWith('calculation-')) {
+				valueFieldId = field.id;
+			}
+			if (dateFieldTypes.includes(field.type)) {
+				dateFieldId = field.id;
+			}
+		}
+	}
+
+	async function handleSave() {
+		save({
+			id,
+			title,
+			entityId,
+			frequency,
+			valueFieldId,
+			dateFieldId,
+			operation
+		});
+	}
+</script>
+
+<div class="config">
+	<Input label="titre" bind:value={title} placeholder="exemple"></Input>
+	<h5>Entité</h5>
+	<DropdownMenu.Root direction="bottom">
+		<DropdownMenu.Trigger slot="trigger">
+			<Button variant="secondary">
+				<h5>{entity?.plural_name ?? 'choisissez une entité'}</h5>
+			</Button>
+		</DropdownMenu.Trigger>
+		<DropdownMenu.Content slot="content" width="250px">
+			{#each $entities as entity}
+				<Button
+					onClick={() => {
+						handleSelectEntity(entity);
+					}}
+					variant="ghost"
+					style="width:100%;"><h5>{entity.plural_name}</h5></Button
+				>
+			{/each}
+		</DropdownMenu.Content>
+	</DropdownMenu.Root>
+	{#if entity}
+		{@const availedValueFields = entity.fields.filter(
+			(field) => field.type.startsWith('number-') || field.type.startsWith('calculation-')
+		)}
+		{@const availedDateFields = entity.fields.filter((field) =>
+			dateFieldTypes.includes(field.type)
+		)}
+         <h5>Champs pour valeurs</h5>
+            <DropdownMenu.Root direction="bottom">
+                <DropdownMenu.Trigger slot="trigger">
+                    <Button variant="secondary">
+                        <h5>{valueField?.name ?? 'choisissez un champ pour valeur'}</h5>
+                    </Button>
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Content slot="content" width="250px">
+                    {#if availedValueFields.length > 0}
+                        {#each availedValueFields as field}
+                            <Button
+                                onClick={() => {
+                                    valueFieldId = field.id;
+                                }}
+                                variant="ghost"
+                                style="width:100%;"><h5>{field.name}</h5></Button
+                            >
+                        {/each}
+                    {:else}
+                        <div class="nothing">
+                            <h3>Aucun champs de valeur disponible</h3>
+                            <p>
+                                L'entité {entity?.plural_name} ne contient pas de champs nombre, permettant les calculs.
+                            </p>
+                        </div>
+                    {/if}
+                </DropdownMenu.Content>
+            </DropdownMenu.Root>
+		<h5>Champs pour date</h5>
+		<DropdownMenu.Root direction="bottom">
+			<DropdownMenu.Trigger slot="trigger">
+				<Button variant="secondary">
+					<h5>{dateField?.name ?? 'choisissez un champ pour date'}</h5>
+				</Button>
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content slot="content" width="250px">
+				{#if availedDateFields.length > 0}
+					{#each availedDateFields as field}
+						<Button
+							onClick={() => {
+								dateFieldId = field.id;
+							}}
+							variant="ghost"
+							style="width:100%;"><h5>{field.name}</h5></Button
+						>
+					{/each}
+				{:else}
+					<div class="nothing">
+						<h3>Aucun champs de date disponible</h3>
+						<p>L'entité {entity?.plural_name} ne contient pas de champs de date.</p>
+					</div>
+				{/if}
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+		<h5>fréquence</h5>
+		<DropdownMenu.Root direction="bottom">
+			<DropdownMenu.Trigger slot="trigger">
+				<Button variant="secondary">
+					<h5>{frequency ? frequencyTextForConfig[frequency] : 'choisissez une fréquence'}</h5>
+				</Button>
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content slot="content" width="250px">
+				{#each frequencies as frequencyEl}
+					<Button
+						onClick={() => {
+							frequency = frequencyEl;
+						}}
+						variant="ghost"
+						style="width:100%;"><h5>{frequencyTextForConfig[frequencyEl]}</h5></Button
+					>
+				{/each}
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+	{/if}
+
+    <Button onClick={handleSave}>
+        <h5>enregistrer</h5>
+    </Button>
+</div>
+
+<style>
+	.config {
+		display: flex;
+		flex-direction: column;
+        row-gap: var(--pad-m);
+	}
+
+	.nothing {
+		display: flex;
+		flex-direction: column;
+		row-gap: var(--pad-m);
+		padding: var(--pad-m);
+	}
+</style>

package/src/lib/registry/widgetTypeRegistry/widgetTypes/Bar/index.js

@@ -0,0 +1,13 @@
+import ConfigBar from "./ConfigBar.svelte";
+import Bar from "./Bar.svelte";
+import { createWidgetType } from "../../createWidgetType";
+
+
+export default createWidgetType({
+    type:"Bar",
+    name:"Graphique en bar",
+    components:{
+        config:ConfigBar,
+        component:Bar,
+    }
+})

package/src/lib/registry/widgetTypeRegistry/widgetTypes/Bar/text.js

@@ -0,0 +1,21 @@
+
+
+export const frequencyText = {
+    'day': 'aujourd\'hui',
+    'month': 'ce mois-ci',
+    'year': 'cette année'
+}
+
+export const frequencyTextForConfig = {
+    'day': 'par jour',
+    'month': 'par mois',
+    'year': 'par an'
+}
+
+export const operationText = {
+    'count': 'nombre d\'entrée',
+    'sum': 'somme',
+    'avg': 'moyenne',
+    'min': "min",
+    'max': "max"
+}

package/src/lib/registry/widgetTypeRegistry/widgetTypes/Evolution/ConfigEvolution.svelte

@@ -0,0 +1,180 @@
+<script>
+	import { Button, DropdownMenu, Input, sendRequest } from 'hamzus-ui';
+	import { frequencyText, frequencyTextForConfig } from './text';
+	import { entityRegistry } from '$lib/registry/entityRegistry/registry.svelte';
+
+	let {id = null, save = () => {}} = $props()
+
+	let title = $state('');
+
+    const entities = entityRegistry.getAll()
+
+	let entityId = $state(null);
+	const entity = $derived(entityRegistry.get(entityId));
+
+	let frequency = $state('month'); // day | month | year
+	const frequencies = ['day', 'month', 'year'];
+
+	let valueFieldId = $state(null);
+	const valueField = $derived(entityRegistry.getField(valueFieldId));
+
+	let dateFieldId = $state(null);
+	const dateField = $derived(entityRegistry.getField(dateFieldId));
+	const dateFieldTypes = ['time-created_at', 'time-datetime', 'time-updated_at'];
+
+	let operation = 'count'; // count | sum | avg | min | max
+	const operations = ['count', 'sum', 'avg', 'min', 'max'];
+
+	let size = $state('4/2');
+	const sizes = ['4/2', '6/2', '8/2', '12/2'];
+
+	function handleSelectEntity(entity) {
+		entityId = entity.id;
+
+		// parcourir les fields pour set auto le field de value et de date
+		for (const field of entity.fields) {
+			if (field.type.startsWith('number-') || field.type.startsWith('calculation-')) {
+				valueFieldId = field.id;
+			}
+			if (dateFieldTypes.includes(field.type)) {
+				dateFieldId = field.id;
+			}
+		}
+	}
+
+	async function handleSave() {
+		save({
+			id,
+			title,
+			entityId,
+			frequency,
+			valueFieldId,
+			dateFieldId,
+			operation,
+			size
+		});
+	}
+</script>
+
+<div class="config">
+	<Input label="titre" bind:value={title} placeholder="exemple"></Input>
+	<h5>Entité</h5>
+	<DropdownMenu.Root direction="bottom">
+		<DropdownMenu.Trigger slot="trigger">
+			<Button variant="secondary">
+				<h5>{entity?.plural_name ?? 'choisissez une entité'}</h5>
+			</Button>
+		</DropdownMenu.Trigger>
+		<DropdownMenu.Content slot="content" width="250px">
+			{#each $entities as entity}
+				<Button
+					onClick={() => {
+						handleSelectEntity(entity);
+					}}
+					variant="ghost"
+					style="width:100%;"><h5>{entity.plural_name}</h5></Button
+				>
+			{/each}
+		</DropdownMenu.Content>
+	</DropdownMenu.Root>
+	{#if entity}
+		{@const availedValueFields = entity.fields.filter(
+			(field) => field.type.startsWith('number-') || field.type.startsWith('calculation-')
+		)}
+		{@const availedDateFields = entity.fields.filter((field) =>
+			dateFieldTypes.includes(field.type)
+		)}
+         <h5>Champs pour valeurs</h5>
+            <DropdownMenu.Root direction="bottom">
+                <DropdownMenu.Trigger slot="trigger">
+                    <Button variant="secondary">
+                        <h5>{valueField?.name ?? 'choisissez un champ pour valeur'}</h5>
+                    </Button>
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Content slot="content" width="250px">
+                    {#if availedValueFields.length > 0}
+                        {#each availedValueFields as field}
+                            <Button
+                                onClick={() => {
+                                    valueFieldId = field.id;
+                                }}
+                                variant="ghost"
+                                style="width:100%;"><h5>{field.name}</h5></Button
+                            >
+                        {/each}
+                    {:else}
+                        <div class="nothing">
+                            <h3>Aucun champs de valeur disponible</h3>
+                            <p>
+                                L'entité {entity?.plural_name} ne contient pas de champs nombre, permettant les calculs.
+                            </p>
+                        </div>
+                    {/if}
+                </DropdownMenu.Content>
+            </DropdownMenu.Root>
+		<h5>Champs pour date</h5>
+		<DropdownMenu.Root direction="bottom">
+			<DropdownMenu.Trigger slot="trigger">
+				<Button variant="secondary">
+					<h5>{dateField?.name ?? 'choisissez un champ pour date'}</h5>
+				</Button>
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content slot="content" width="250px">
+				{#if availedDateFields.length > 0}
+					{#each availedDateFields as field}
+						<Button
+							onClick={() => {
+								dateFieldId = field.id;
+							}}
+							variant="ghost"
+							style="width:100%;"><h5>{field.name}</h5></Button
+						>
+					{/each}
+				{:else}
+					<div class="nothing">
+						<h3>Aucun champs de date disponible</h3>
+						<p>L'entité {entity?.plural_name} ne contient pas de champs de date.</p>
+					</div>
+				{/if}
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+		<h5>fréquence</h5>
+		<DropdownMenu.Root direction="bottom">
+			<DropdownMenu.Trigger slot="trigger">
+				<Button variant="secondary">
+					<h5>{frequency ? frequencyTextForConfig[frequency] : 'choisissez une fréquence'}</h5>
+				</Button>
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content slot="content" width="250px">
+				{#each frequencies as frequencyEl}
+					<Button
+						onClick={() => {
+							frequency = frequencyEl;
+						}}
+						variant="ghost"
+						style="width:100%;"><h5>{frequencyTextForConfig[frequencyEl]}</h5></Button
+					>
+				{/each}
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+	{/if}
+
+    <Button onClick={handleSave}>
+        <h5>enregistrer</h5>
+    </Button>
+</div>
+
+<style>
+	.config {
+		display: flex;
+		flex-direction: column;
+        row-gap: var(--pad-m);
+	}
+
+	.nothing {
+		display: flex;
+		flex-direction: column;
+		row-gap: var(--pad-m);
+		padding: var(--pad-m);
+	}
+</style>

package/src/lib/registry/widgetTypeRegistry/widgetTypes/Evolution/Evolution.svelte

@@ -0,0 +1,81 @@
+<script>
+	import { ChartLine, sendRequest, Skeleton } from 'hamzus-ui';
+	import { frequencyText, operationText } from './text';
+	import { onMount } from 'svelte';
+
+    let {
+        id = '',title = '',entityId = '',frequency = '',valueFieldId = '',dateFieldId = '',operation = '',
+    } = $props()
+
+	let data = $state(null);
+	let previousTotal = $state(null);
+
+	onMount(async () => {
+		const request = await sendRequest({
+			path: '/get-widget-data',
+			data: {
+				widgetLinkId: id
+			}
+		});
+
+
+        data = request.data
+	});
+
+	function getRandomSizes() {
+		const sizes = [60, 120, 80];
+
+		return sizes[Math.floor(Math.random() * sizes.length)];
+	}
+
+	function getPercent() {
+		if (previousTotal === 0) {
+			if (total === 0) return 0;
+			return null; // augmentation non calculable
+		}
+		return ((total - previousTotal) / previousTotal) * 100;
+	}
+</script>
+
+<div class="kpi-container">
+	<div class="kpi">
+		<h4>{title}</h4>
+		{#if data === null}
+			<Skeleton style="width:{getRandomSizes()}px;height:32px;"></Skeleton>
+		{:else}
+            <ChartLine {data}
+            ></ChartLine>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.kpi-container {
+		width: 100%;
+		height: 100%;
+		padding: var(--pad-m);
+	}
+
+	.kpi {
+		display: flex;
+		flex-direction: column;
+		row-gap: var(--pad-m);
+		padding: var(--pad-xxl);
+		width: 100%;
+		height: 100%;
+		background-color: var(--bg-blur);
+		border-radius: var(--radius-m);
+	}
+
+	.bottom {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.right {
+		display: flex;
+		align-items: center;
+		column-gap: var(--pad-m);
+	}
+</style>

package/src/lib/registry/widgetTypeRegistry/widgetTypes/Evolution/index.js

@@ -0,0 +1,13 @@
+import ConfigEvolution from "./ConfigEvolution.svelte";
+import Evolution from "./Evolution.svelte";
+import { createWidgetType } from "../../createWidgetType";
+
+
+export default createWidgetType({
+    type: "Evolution",
+    name: "Graphique d'évolution",
+    components: {
+        config: ConfigEvolution,
+        component: Evolution,
+    }
+})

package/src/lib/registry/widgetTypeRegistry/widgetTypes/Evolution/text.js

@@ -0,0 +1,21 @@
+
+
+export const frequencyText = {
+    'day': 'aujourd\'hui',
+    'month': 'ce mois-ci',
+    'year': 'cette année'
+}
+
+export const frequencyTextForConfig = {
+    'day': 'par jour',
+    'month': 'par mois',
+    'year': 'par an'
+}
+
+export const operationText = {
+    'count': 'nombre d\'entrée',
+    'sum': 'somme',
+    'avg': 'moyenne',
+    'min': "min",
+    'max': "max"
+}