RenderProcessStep

A default component that renders a process step which is extracted from the event log. It shows a heat gauge next to the label of the process step.

Note that this visualization has a minimum height of 50. Smaller sizes defined with ProcessMining.itemSize may result in a broken visualization.

The component is already used as a fallback if no render prop is specified on ProcessMining. However, it can be integrated in another component, for example to have different styles for different items.

function ProcessMiningDiagram() {
  const CustomProcessStep = useMemo(
    () => (props: RenderProcessStepProps) => {
      const { dataItem } = props
      if (dataItem?.label === 'Start') {
        return (
          <>
            <div
              style={{
                backgroundColor: 'blue',
                color: 'white',
                width: '100%',
                height: '100%'
              }}
            >
              <div>{dataItem.label}</div>
            </div>
          </>
        )
      } else {
        return <RenderProcessStep {...props}></RenderProcessStep>
      }
    },
    []
  )

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

Props

RenderProcessStepProps

TDataItem

”low” | “high”

boolean

number

boolean

boolean

number

number