RenderHeatGauge

Renders a gauge that displays the current given heat value.

The gauge is part of the default RenderProcessStep but can also added to a custom process step visualization.

function CustomProcessStep({ dataItem, timestamp }: RenderProcessStepProps) {
  const heat = dataItem.heat?.getValue(timestamp) ?? 0
  const normalizedHeat = Math.min(1, heat / (dataItem.capacity ?? 100))
  return (
    <div className="custom-process-step">
      <div className="title">{dataItem.label}</div>
      <div>Heat: {heat}</div>
      <div>Capacity: {dataItem.capacity}</div>
      <div className="gauge">
        <RenderHeatGauge heat={normalizedHeat} size={50} />
      </div>
    </div>
  )
}

function App() {
  return <ProcessMining eventLog={eventLog} renderProcessStep={CustomProcessStep}></ProcessMining>
}

Props

RenderHeatGaugeProps

number

number