Dynamic Values

Dynamic values can be displayed in the title, subTitle, DateCounter and caption, based on the data and the currently displayed date.

This can be achieved by using data function.

This example uses the Github push events dataset, and displays dynamic values in the 4 fields.

Loading...

show code

JS

import { race } from "racing-bars";

const options = {
  dataType: "csv",
  title: function getYearRange(currentDate, dateSlice, allDates) {
    return `Top Languages (${allDates[0].slice(0, 4)} - ${allDates[
      allDates.length - 1
    ].slice(0, 4)})`;
  },
  subTitle: function getTop5(currentDate, dateSlice, allDates) {
    return `Top 5: ${dateSlice
      .slice(0, 5)
      .map((d) => d.name)
      .join(", ")}`;
  },
  dateCounter: function getYearQuarter(currentDate, dateSlice, allDates) {
    const month = Number(currentDate.slice(5, 7));
    const year = Number(currentDate.slice(0, 4));
    const q = Math.floor(month / 3) + 1;
    const quarter = q > 4 ? q - 4 : q;
    return `Q${quarter} ${year}`;
  },
  caption: function getTotal(currentDate, dateSlice, allDates) {
    return `Total: ${Math.round(
      dateSlice.reduce((acc, curr) => acc + curr.value, 0)
    )}`;
  },
};

race("/data/gh-push.csv", "#race", options);

Open in playground

TS

import { race, type Options } from "racing-bars";

const options: Options = {
  dataType: "csv",
  title: function getYearRange(currentDate, dateSlice, allDates) {
    return `Top Languages (${allDates[0].slice(0, 4)} - ${allDates[
      allDates.length - 1
    ].slice(0, 4)})`;
  },
  subTitle: function getTop5(currentDate, dateSlice, allDates) {
    return `Top 5: ${dateSlice
      .slice(0, 5)
      .map((d) => d.name)
      .join(", ")}`;
  },
  dateCounter: function getYearQuarter(currentDate, dateSlice, allDates) {
    const month = Number(currentDate.slice(5, 7));
    const year = Number(currentDate.slice(0, 4));
    const q = Math.floor(month / 3) + 1;
    const quarter = q > 4 ? q - 4 : q;
    return `Q${quarter} ${year}`;
  },
  caption: function getTotal(currentDate, dateSlice, allDates) {
    return `Total: ${Math.round(
      dateSlice.reduce((acc, curr) => acc + curr.value, 0)
    )}`;
  },
};

race("/data/gh-push.csv", "#race", options);

Open in playground

React

import RacingBars from "racing-bars/react";

export default function App() {
  const options = {
    dataUrl: "/data/gh-push.csv",
    dataType: "csv",
    title: function getYearRange(currentDate, dateSlice, allDates) {
      return `Top Languages (${allDates[0].slice(0, 4)} - ${allDates[
        allDates.length - 1
      ].slice(0, 4)})`;
    },
    subTitle: function getTop5(currentDate, dateSlice, allDates) {
      return `Top 5: ${dateSlice
        .slice(0, 5)
        .map((d) => d.name)
        .join(", ")}`;
    },
    dateCounter: function getYearQuarter(currentDate, dateSlice, allDates) {
      const month = Number(currentDate.slice(5, 7));
      const year = Number(currentDate.slice(0, 4));
      const q = Math.floor(month / 3) + 1;
      const quarter = q > 4 ? q - 4 : q;
      return `Q${quarter} ${year}`;
    },
    caption: function getTotal(currentDate, dateSlice, allDates) {
      return `Total: ${Math.round(
        dateSlice.reduce((acc, curr) => acc + curr.value, 0)
      )}`;
    },
  };

  return <RacingBars {...options}>Loading...</RacingBars>;
}

Open in playground

Vue

<script setup>
  import RacingBars from "racing-bars/vue";

  const options = {
    dataUrl: "/data/gh-push.csv",
    dataType: "csv",
    title: function getYearRange(currentDate, dateSlice, allDates) {
      return `Top Languages (${allDates[0].slice(0, 4)} - ${allDates[
        allDates.length - 1
      ].slice(0, 4)})`;
    },
    subTitle: function getTop5(currentDate, dateSlice, allDates) {
      return `Top 5: ${dateSlice
        .slice(0, 5)
        .map((d) => d.name)
        .join(", ")}`;
    },
    dateCounter: function getYearQuarter(currentDate, dateSlice, allDates) {
      const month = Number(currentDate.slice(5, 7));
      const year = Number(currentDate.slice(0, 4));
      const q = Math.floor(month / 3) + 1;
      const quarter = q > 4 ? q - 4 : q;
      return `Q${quarter} ${year}`;
    },
    caption: function getTotal(currentDate, dateSlice, allDates) {
      return `Total: ${Math.round(
        dateSlice.reduce((acc, curr) => acc + curr.value, 0)
      )}`;
    },
  };
</script>

<template>
  <RacingBars v-bind="options">Loading...</RacingBars>
</template>

Open in playground

Svelte

<script>
  import { onMount } from "svelte";
  import { race } from "racing-bars";

  const options = {
    dataType: "csv",
    title: function getYearRange(currentDate, dateSlice, allDates) {
      return `Top Languages (${allDates[0].slice(0, 4)} - ${allDates[
        allDates.length - 1
      ].slice(0, 4)})`;
    },
    subTitle: function getTop5(currentDate, dateSlice, allDates) {
      return `Top 5: ${dateSlice
        .slice(0, 5)
        .map((d) => d.name)
        .join(", ")}`;
    },
    dateCounter: function getYearQuarter(currentDate, dateSlice, allDates) {
      const month = Number(currentDate.slice(5, 7));
      const year = Number(currentDate.slice(0, 4));
      const q = Math.floor(month / 3) + 1;
      const quarter = q > 4 ? q - 4 : q;
      return `Q${quarter} ${year}`;
    },
    caption: function getTotal(currentDate, dateSlice, allDates) {
      return `Total: ${Math.round(
        dateSlice.reduce((acc, curr) => acc + curr.value, 0)
      )}`;
    },
  };

  onMount(() => {
    race("/data/gh-push.csv", "#race", options);
  });
</script>

<div id="race">Loading...</div>

Open in playground