mm-dashboard-demo v0.0.11

Svelte dashboard demo

Usage

<script lang="ts">
  import Dashboard from "mm-dashboard-demo";
  import type { DashboardData, XAxisOption, YAxisOption } from "mm-dashboard-demo/dashboard";

  //
  const dateToBindableString = (date: Date) => {
    let month = "" + (date.getMonth() + 1);
    let day = "" + date.getDate();
    let year = date.getFullYear();

    if (month.length < 2) month = "0" + month;
    if (day.length < 2) day = "0" + day;

    return [year, month, day].join("-");
  };

  let fromTransformed = dateToBindableString(new Date());
  let toTransformed = dateToBindableString(new Date());

  const baseUrl = "https://YOUR_BASE_URL/";

  let handleGetXAxisOptions: () => XAxisOption[];
  let handleGetYAxisOptions: () => YAxisOption[];
  let handleGetSelectedXAxis: () => XAxisOption;
  let handleGetSelectedYAxis: () => YAxisOption;
  let handleGetDashboardData: () => DashboardData;
</script>

<div class="content-wrapper">
  <div>
    <button
      on:click={() => {
        const item = handleGetXAxisOptions();
        console.log(item);
      }}>handleGetXAxisOptions</button
    >
    <button
      on:click={() => {
        const item = handleGetYAxisOptions();
        console.log(item);
      }}>handleGetYAxisOptions</button
    >
    <button
      on:click={() => {
        const item = handleGetSelectedXAxis();
        console.log(item);
      }}>handleGetSelectedXAxis</button
    >
    <button
      on:click={() => {
        const item = handleGetSelectedYAxis();
        console.log(item);
      }}>handleGetSelectedYAxis</button
    >
    <button
      on:click={() => {
        const item = handleGetDashboardData();
        console.log(item);
      }}>handleGetDashboardData</button
    >
  </div>

  <div class="inputs">
    <input type="date" bind:value={fromTransformed} />
    <input type="date" bind:value={toTransformed} />
  </div>

  <Dashboard
    {baseUrl}
    from={new Date(fromTransformed)}
    to={new Date(toTransformed)}
    colors={["#015C92", "#0170B1", "#027EC6", "#01A2FF"]}
    on:dataPointSelection={({ detail }) => console.log("dataPointSelection", detail)}
    on:updated={({ detail }) => console.log("updated", detail)}
    bind:getXAxisOptions={handleGetXAxisOptions}
    bind:getYAxisOptions={handleGetYAxisOptions}
    bind:getSelectedXAxis={handleGetSelectedXAxis}
    bind:getSelectedYAxis={handleGetSelectedYAxis}
    bind:getDashboardData={handleGetDashboardData}
  />
</div>

<style>
  .inputs {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem;
  }
</style>