ThresholdChart

import { ThresholdChart } from "@grassroot/charts-react";
 
const thresholdTemperature = Array.from({ length: 48 }, (_, index) => {
  const phase = index / 47;
  const reference = 55 + Math.sin(index * 0.42) * 3 + Math.cos(index * 0.16) * 2;
  const winterDip = -15 * Math.exp(-(((phase - 0.33) / 0.2) ** 2));
  const summerLift = 19 * Math.exp(-(((phase - 0.72) / 0.2) ** 2));
  const noise = Math.sin(index * 1.9) * 3 + Math.cos(index * 0.73) * 2;
  return { x: index, y: Math.round(reference + winterDip + summerLift + noise), y1: Math.round(reference) };
});
 
 
<ThresholdChart data={thresholdTemperature} aboveColor={"var(--vs-success)"} belowColor={"var(--vs-info)"} />

<script setup lang="ts">
import { ThresholdChart } from "@grassroot/charts-vue";
 
const thresholdTemperature = Array.from({ length: 48 }, (_, index) => {
  const phase = index / 47;
  const reference = 55 + Math.sin(index * 0.42) * 3 + Math.cos(index * 0.16) * 2;
  const winterDip = -15 * Math.exp(-(((phase - 0.33) / 0.2) ** 2));
  const summerLift = 19 * Math.exp(-(((phase - 0.72) / 0.2) ** 2));
  const noise = Math.sin(index * 1.9) * 3 + Math.cos(index * 0.73) * 2;
  return { x: index, y: Math.round(reference + winterDip + summerLift + noise), y1: Math.round(reference) };
});
</script>
 
<template>
  <ThresholdChart :data='thresholdTemperature' :aboveColor='"var(--vs-success)"' :belowColor='"var(--vs-info)"' />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootThresholdChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-threshold-chart-chart-demo",
  standalone: true,
  imports: [GrassrootThresholdChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-threshold-chart [data]='thresholdTemperature' [aboveColor]='"var(--vs-success)"' [belowColor]='"var(--vs-info)"' />`,
})
export class ThresholdChartDemoComponent {
  readonly thresholdTemperature = Array.from({ length: 48 }, (_, index) => {
    const phase = index / 47;
    const reference = 55 + Math.sin(index * 0.42) * 3 + Math.cos(index * 0.16) * 2;
    const winterDip = -15 * Math.exp(-(((phase - 0.33) / 0.2) ** 2));
    const summerLift = 19 * Math.exp(-(((phase - 0.72) / 0.2) ** 2));
    const noise = Math.sin(index * 1.9) * 3 + Math.cos(index * 0.73) * 2;
    return { x: index, y: Math.round(reference + winterDip + summerLift + noise), y1: Math.round(reference) };
  });
}
 
export default ThresholdChartDemoComponent;

<script lang="ts">
  import { ThresholdChart } from "@grassroot/charts-svelte";
 
  const thresholdTemperature = Array.from({ length: 48 }, (_, index) => {
    const phase = index / 47;
    const reference = 55 + Math.sin(index * 0.42) * 3 + Math.cos(index * 0.16) * 2;
    const winterDip = -15 * Math.exp(-(((phase - 0.33) / 0.2) ** 2));
    const summerLift = 19 * Math.exp(-(((phase - 0.72) / 0.2) ** 2));
    const noise = Math.sin(index * 1.9) * 3 + Math.cos(index * 0.73) * 2;
    return { x: index, y: Math.round(reference + winterDip + summerLift + noise), y1: Math.round(reference) };
  });
</script>
 
<ThresholdChart data={thresholdTemperature} aboveColor={"var(--vs-success)"} belowColor={"var(--vs-info)"} />

/** @jsxImportSource solid-js */
import { ThresholdChart } from "@grassroot/charts-solid";
 
const thresholdTemperature = Array.from({ length: 48 }, (_, index) => {
  const phase = index / 47;
  const reference = 55 + Math.sin(index * 0.42) * 3 + Math.cos(index * 0.16) * 2;
  const winterDip = -15 * Math.exp(-(((phase - 0.33) / 0.2) ** 2));
  const summerLift = 19 * Math.exp(-(((phase - 0.72) / 0.2) ** 2));
  const noise = Math.sin(index * 1.9) * 3 + Math.cos(index * 0.73) * 2;
  return { x: index, y: Math.round(reference + winterDip + summerLift + noise), y1: Math.round(reference) };
});
 
export default function ThresholdChartDemo() {
  return <ThresholdChart data={thresholdTemperature} aboveColor={"var(--vs-success)"} belowColor={"var(--vs-info)"} />;
}