+
+
+
+
+ {dataAll !== undefined && (
+
+ )}
+
+
+
+
+ {children}
+
+
+
+
+ {rangeAll !== undefined &&
+ rangeAll.start !== undefined &&
+ rangeAll.end !== undefined && (
+
(
+
+ {yearMonthtoText(noToYearMonth(props.key, rangeAll))}
+
+ )}
+ defaultValue={[0, noMonth(rangeAll)]}
+ ariaLabel={['Lower thumb', 'Upper thumb']}
+ ariaValuetext={(state) =>
+ `Thumb value ${yearMonthtoText(
+ noToYearMonth(state.valueNow, rangeAll),
+ )}`
+ }
+ renderThumb={(props, state) => (
+
+ {yearMonthtoText(noToYearMonth(state.valueNow, rangeAll))}
+
+ )}
+ pearling
+ minDistance={0}
+ onChange={(value) => rangeChange(value)}
+ />
+ )}
+
+ {mode === 'ALL' && (
+
+ Colors indicate condition types (not their values): {' '}
+
KPI
+
DI
+
IRI
+
μ
+
E
+
+ )}
+ {mode !== 'ALL' && (
+
+ Colors indicate condition values from
+ green (good)
+ over
+ yellow (medium)
+ to
+ red (bad)!
+
+ )}
+