@icgcat/chart 0.0.1

package/README.md

@@ -0,0 +1,128 @@
+# Accordion Component for Svelte
+
+## Introduction
+This Svelte package provides two components for creating collapsible sections: `Accordion` and `SubAccordion`. These components are accessible, customizable, and lightweight, with built-in animations and rich styling options. Perfect for displaying nested or standalone collapsible content sections in a clean and interactive manner.
+
+---
+
+## Installation
+
+To clone the package:
+
+```bash
+git clone git@autogitlab.icgc.local:geostarters/components/accordion.git
+```
+
+To install the package, use npm or yarn:
+
+```bash
+npm install @icgcat/accordion
+```
+
+---
+
+## Usage
+
+### Import and Basic Example
+Here's how to use the `Accordion` and `SubAccordion` components in your Svelte application:
+
+```svelte
+<script>
+  import { Accordion, SubAccordion } from "@icgcat/accordion";
+
+  let openedAccordion = 0; // Track the currently opened accordion
+
+  const toggleAccordion = (id) => {
+    openedAccordion = openedAccordion === id ? 0 : id;
+  };
+</script>
+
+<Accordion
+  id={1}
+  openedAccordion={openedAccordion}
+  title="First Section"
+  iconTheme = "share"
+  onToggle={toggleAccordion}
+  component={() => <p>Content for the first section</p>}
+/>
+
+<Accordion
+  id={2}
+  openedAccordion={openedAccordion}
+  title="Second Section"
+  iconTheme = "map"
+  onToggle={toggleAccordion}
+>
+  <SubAccordion
+    id={3}
+    openedAccordion={openedAccordion}
+    title="Nested Section"
+    onToggle={toggleAccordion}
+  >
+    <p>Content for the nested section</p>
+  </SubAccordion>
+</Accordion>
+```
+
+---
+
+## Props
+### Accordion
+The `Accordion` component accepts the following props:
+
+| Prop              | Type     | Default                | Description                                   |
+|-------------------|----------|------------------------|-----------------------------------------------|
+| `id`              | `number` | `0`                    | Unique identifier for each accordion.         |
+| `openedAccordion` | `number` | `0`                    | Tracks the currently opened accordion.        |
+| `title`           | `string` | `""`                  | The title displayed in the accordion header.  |
+| `className`       | `string` | `"acc"`               | Custom CSS class for styling.                 |
+| `iconTheme`       | `string` | `"keyboard_arrow_down"` | Icon displayed in the accordion header.      |
+| `component`       | `any`    | `null`                 | Content rendered inside the accordion body.   |
+| `onToggle`        | `function` | `null`                | Callback triggered when the accordion is toggled. |
+| `openColor`       | `string` | `"#FFE448"`           | Background color when the accordion is open.  |
+| `backgroundColor` | `string` | `"#F5F5F5"`           | Default background color.                     |
+| `hoverColor`      | `string` | `"rgb(173, 173, 173)"`| Background color on hover.                    |
+| `activeColorStyle`| `string` | `"rgb(173, 173, 173)"`| Background color on active state.             |
+| `fontColor`       | `string` | `"black"`             | Font color for the accordion header.          |
+| `children`        | `function` | `null`               | Content passed dynamically to the accordion body. |
+
+### SubAccordion
+The `SubAccordion` component accepts the same props as `Accordion`, with the exception of `component`. Instead, it expects content to be passed as `children`.
+
+---
+
+## Styling
+The components come with default styles, but you can override them using custom CSS. For example:
+
+```css
+.acc {
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.collapsible-header {
+  transition: background-color 0.3s ease;
+}
+```
+
+---
+
+## Transitions
+These components use Svelte's `slide` transition for smooth opening and closing animations. You can modify or replace the transition if desired.
+
+---
+
+## Accessibility
+- Fully keyboard-navigable.
+- Supports dynamic aria-expanded attributes for screen readers.
+
+---
+
+## Contributions
+Feel free to fork this repository and open pull requests to improve the components or add new features.
+
+---
+
+## License
+This project is licensed under the MIT License.
+

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@icgcat/chart",
+  "version": "0.0.1",
+  "main": "src/index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "vite build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [],
+  "author": "Geostarters",
+  "license": "ISC",
+  "description": "A Svelte Chart based on chart.js",
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "svelte": "^5.0.0",
+    "svelte-preprocess": "^6.0.3",
+    "vite": "^6.0.3"
+  },
+  "dependencies": {
+    "chart.js": "^4.4.7"
+  }
+}

package/src/Chart.svelte

@@ -0,0 +1,67 @@
+<script>
+    import { onMount } from "svelte";
+    import Chart from "chart.js/auto";
+
+    let chartCanvas; // Referència al canvas del gràfic
+
+    // Configuració inicial del gràfic
+    export let chartData = {
+        type: "bar", // Tipus de gràfic: bar, line, pie, etc.
+        data: {
+            labels: [
+                "Gener",
+                "Febrer",
+                "Març",
+                "Abril",
+                "Maig",
+                "Juny",
+                "Juliol",
+                "Agost",
+                "Setembre",
+                "Octubre",
+                "Novembre",
+                "Desembre",
+            ],
+            datasets: [
+                {
+                    label: "Temperatura mitjana",
+                    data: [-3, -5, -2, 4, 10, 16, 18, 22, 20, 14, 8, 3],
+                    backgroundColor: "rgba(75, 192, 192, 0.2)",
+                    borderColor: "rgba(75, 192, 192, 1)",
+                    borderWidth: 2,
+                },
+            ],
+        },
+        options: {
+            responsive: true,
+            plugins: {
+                legend: {
+                    display: true,
+                    position: "bottom",
+                },
+            },
+        },
+    };
+
+    let chartInstance; // Instància del gràfic
+
+    onMount(() => {
+        // Crear el gràfic al muntar el component
+        // @ts-ignore
+        chartInstance = new Chart(chartCanvas, chartData);
+
+        return () => {
+            // Destruir el gràfic quan es destrueixi el component
+            if (chartInstance) chartInstance.destroy();
+        };
+    });
+</script>
+
+<canvas bind:this={chartCanvas}></canvas>
+
+<style>
+    canvas {
+        max-width: 100%;
+        margin: 20px 0;
+    }
+</style>

package/src/index.js

@@ -0,0 +1,3 @@
+import Chart from "./Chart.svelte";
+
+export default Chart;

package/vite.config.js

@@ -0,0 +1,23 @@
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { sveltePreprocess } from "svelte-preprocess";
+
+export default defineConfig({
+    plugins: [svelte({ preprocess: sveltePreprocess() })],
+    build: {
+        lib: {
+            entry: "src/index.js",
+            name: "Chart",
+            formats: ["es", "cjs", "umd"],
+            fileName: (format) => `svelte-chart.${format}.js`,
+        },
+        rollupOptions: {
+            external: ["svelte"],
+            output: {
+                globals: {
+                    svelte: "Svelte",
+                },
+            },
+        },
+    },
+});