Slider

The Dashboard page continues with a chart of daily revenue that uses a Slider to control both ends of a date range.

Here is a simplified version of that mechanism. Try using both slider handles to adjust the date range and corresponding total revenue.

<App>
  <SliderDemo />
</App>

<App>
  <SliderDemo />
</App>

Here's SliderDemo.

<Component name="SliderDemo">
  <variable name="startDate" value="2022-06-01" />
  <variable name="endDate" value="2022-06-30" />

  <variable name="dailyData" value="{[
    {date: '2022-06-01', total: 1200},
    {date: '2022-06-02', total: 1850},
    ...
    {date: '2022-06-29', total: 0},
    {date: '2022-06-30', total: 2200}
  ]}" />

  <variable name="filteredData" value="{
    dailyData.filter(item => item.date >= startDate && item.date <= endDate)
  }" />

  <VStack>
    <H1>Slider Demo</H1>

    <Text>Selected records: {filteredData.length}</Text>

    <Slider
      id="dateSlider"
      label="Date range"
      minValue="{1}"
      maxValue="{30}"
      initialValue="{[1, 30]}"
      step="{1}"
      onDidChange="{
        startDate = window.sliderValueToDate(dateSlider.value[0]);
        endDate = window.sliderValueToDate(dateSlider.value[1]);
      }"
      valueFormat="{ (value) => {
        const result = window.sliderValueToDate(value);
        return result;
        }
      }"
    />

    <Text>
      Total Revenue: ${filteredData.reduce((sum, item) => sum + item.total, 0)}
    </Text>

  </VStack>
</Component>

When the handles move, the slider's onDidChange event updates startDate and endDate using a function, sliderValueToDate, that translates the slider position to a date in the range of dates. In the Invoices app those variables form part of a DataSource URL that fires when there's a change; here they update the filteredData variable to simulate the real DataSource.

The slider's valueFormat property uses the same function to report the new startDate and endDate.

A custom Slider

The Invoices app encapsulates this behavior in a custom component called DateRangeSlider.

<Component name="DateRangeSlider">
  <variable name="originalStartDate" value="{ $props.minDate }"/>
  <variable name="maxEndDate" value="{ $props.maxDate }"/>
  <variable name="startDate" value="{ originalStartDate }"/>
  <variable name="endDate" value="{ maxEndDate }"/>
  <variable
    name="totalDays"
    value="{ window.daysBetween(originalStartDate, maxEndDate)}"/>

  <ChangeListener
    listenTo="{slider.value}"
    onDidChange="{() => {
      // Update the start and end dates based on slider values
      updateState({
        value: {
          startDate: window.sliderValueToDate(slider.value[0], originalStartDate),
          endDate: window.sliderValueToDate(slider.value[1], originalStartDate)
        }
      });
    }}"
  />

  <Slider
    id="slider"
    label="dateRange"
    minValue="{0}"
    maxValue="{ totalDays }"
    initialValue="{ [0, totalDays] }"
    step="10"
    valueFormat="{ (value) => {
      const date = window.sliderValueToDate(value, originalStartDate);
      return date;
    }}"
  />
</Component>

The updateState method, available in all components, is a merge operation that can set multiple variables.