Gantt Chart Components

[umanshu1996]

Feature Description

query will be like

```sql task
select 
   name as Task_id,
   creation as created_date,
   exp_start_date ,
   completed_on,
   parent_task
from task
where project  like '${inputs.name}'

Attached example of Gantt chart in x axis i want date/week/month and Y axis task

![GANTT-CHART](https://github.com/evidence-dev/evidence/assets/81467720/6a6afef1-3ad3-44f3-b30c-bc992e1ac342)

[hughess]

If anyone is interested in contributing this, some info:

ECharts is starting work on a gantt series: https://github.com/apache/echarts/issues/19579

There's an existing ECharts example here which may be helpful, though would require quite a bit of work to customize + generalize: https://echarts.apache.org/examples/en/editor.html?c=custom-gantt-flight

Our histogram uses a custom ECharts series, which may be helpful to understand how it functions: https://github.com/evidence-dev/evidence/blob/next/packages/core-components/src/lib/unsorted/viz/histogram/Hist.svelte

[andrejohansson]

You could perhaps use a Mermaid gantt diagram for this in a custom component (somewhat at least, I guess you would have to iterate the data and writeout the element).

Here is a custom component where you can specify the diagram within the tag, but you could modify it to generate the gantt part from data instead.

components/Mermaid.svelte

<!-- Mermaid.svelte -->
<script context="module">
    import mermaid from "mermaid";
</script>

<script>
    import { onMount, createEventDispatcher } from "svelte";
    export let id;

    let config = {
        startOnLoad: true
    }

    const dispatch = createEventDispatcher();

    onMount(() => {
        if (!id) {
            throw new Error("The 'id' prop is required for the Mermaid component.");
        }

        mermaid.init(
            config,
            document.getElementById(`mermaid-container-${id}`)
        );

        // Dispatch an event to let the parent component know that the diagram is rendered
        dispatch("mermaidRendered");
    });
</script>

<div id={`mermaid-container-${id}`} class={`mermaid-container-${id} pb-4`} style="display: block; margin: auto; width: 50%;">
    <slot />
</div>