node,
}}
style={{position: 'relative'}}
- value={value}
- marks={truncatedMarks}
+ value={calcValue(min, max, value)}
+ marks={calcMarks({min, max, marks, step})}
+ step={calcStep(min, max, step)}
{...omit(
[
'className',
@@ -112,6 +249,7 @@ export default class RangeSlider extends Component {
'marks',
'updatemode',
'verticalHeight',
+ 'step',
],
this.props
)}
From df24223aff503eab1cbc77c96fc54738983262dc Mon Sep 17 00:00:00 2001
From: workaholicpanda <>
Date: Fri, 10 Sep 2021 22:43:42 -0400
Subject: [PATCH 27/80] add auto generating marks to RangeSlider & Slider
---
.../src/fragments/RangeSlider.react.js | 138 +-----------------
.../src/fragments/Slider.react.js | 16 +-
.../src/utils/computeSliderMarkers.js | 135 +++++++++++++++++
3 files changed, 144 insertions(+), 145 deletions(-)
create mode 100644 components/dash-core-components/src/utils/computeSliderMarkers.js
diff --git a/components/dash-core-components/src/fragments/RangeSlider.react.js b/components/dash-core-components/src/fragments/RangeSlider.react.js
index 622d748b2c..e26ff4fb45 100644
--- a/components/dash-core-components/src/fragments/RangeSlider.react.js
+++ b/components/dash-core-components/src/fragments/RangeSlider.react.js
@@ -1,146 +1,12 @@
import React, {Component} from 'react';
-import {assoc, omit, pickBy} from 'ramda';
+import {assoc, omit} from 'ramda';
import {Range, createSliderWithTooltip} from 'rc-slider';
import computeSliderStyle from '../utils/computeSliderStyle';
import 'rc-slider/assets/index.css';
-
+import {calcValue, calcMarks, calcStep} from '../utils/computeSliderMarkers';
import {propTypes, defaultProps} from '../components/RangeSlider.react';
-/**
- * Truncate marks if they are out of Slider interval
- */
-const truncateMarks = (min, max, marks) =>
- pickBy((k, mark) => mark >= min && mark <= max, marks);
-
-const decimalCount = d =>
- String(d).split('.').length > 1 ? String(d).split('.')[1].length : 0;
-const alignValue = (v, d) => ((v / d).toFixed(0) * d).toFixed(decimalCount(d));
-
-const getNearbyPows = v => [
- Math.pow(10, Math.floor(Math.log10(v))),
- Math.pow(10, Math.ceil(Math.log10(v))),
-];
-
-const estimateBestSteps = (minValue, maxValue, stepValue) => {
- const desiredCountMin = 3 + 2; // including start, end
- const desiredCountMax = 6 + 2;
-
- const totalStepCount = (maxValue - minValue) / stepValue;
- if (totalStepCount <= desiredCountMax) {
- return [minValue, stepValue];
- }
-
- const min = minValue / stepValue;
- const max = maxValue / stepValue;
-
- const rangeLength = max - min;
-
- const worstInterval = Math.max(
- Math.ceil(rangeLength / (desiredCountMin - 1)),
- 1
- );
- let interval = worstInterval;
- const [lowerStep, higherStep] = getNearbyPows(interval);
- const step = interval > higherStep / 2 ? higherStep : lowerStep;
-
- const alignedMin = alignValue(min, step);
- interval = alignValue(interval, step);
- let bestInterval = interval,
- expectedCount = 0;
-
- do {
- expectedCount = (rangeLength / interval).toFixed(0);
-
- if (max >= alignedMin + interval * (expectedCount - 0.5)) {
- bestInterval = interval;
- break;
- }
-
- interval -= step;
- } while (expectedCount < desiredCountMax && interval > 0);
-
- return [
- alignedMin * stepValue,
- (bestInterval > 0 ? bestInterval : worstInterval) * stepValue,
- ];
-};
-
-const autoGenerateMarks = (min, max, step = 1) => {
- const marks = [];
- const [start, interval] = estimateBestSteps(min, max, step);
- let cursor = start + interval;
-
- do {
- marks.push(alignValue(cursor, step));
- cursor += interval;
- } while (cursor < max);
-
- // do some cosmetic
- const discardThreshold = 1.5;
- if (
- marks.length > 2 &&
- max - marks[marks.length - 2] <= interval * discardThreshold
- ) {
- marks.pop();
- }
-
- const marksObject = {};
- marks.forEach(mark => {
- marksObject[mark] = String(mark);
- });
- marksObject[min] = 'Start (' + min + ')';
- marksObject[max] = 'End (' + max + ')';
- return marksObject;
-};
-
-/**
- * Set marks to min and max if not defined, truncate otherwise
- */
-const calcMarks = ({min, max, marks, step}) => {
- console.log("Are you serious, ", marks);
- if (!marks) {
- return {
- [min]: min,
- [max]: max,
- marks: autoGenerateMarks(min, max, step),
- };
- }
-
- return truncateMarks(min, max, marks);
-};
-
-/**
- * Calculate default step if not defined
- */
-const calcStep = (min, max, step) => {
- if (step !== undefined) {
- return step;
- }
-
- const size = Math.abs(max - min); // interval size
- /**
- * Size multiplied by 10^i to get a nice step value at the end (0.1, 1, 10, 100, ...)
- */
- const divident = size
- .toString()
- .replace('.', '') // removes decimal point
- .replace(/^(\d*?[1-9])0+$/, '$1'); // removes trailing zeros
-
- return size / divident;
-};
-
-/**
- * Calculate default value if not defined
- */
-const calcValue = (min, max, value) => {
- if (value !== undefined) {
- return value;
- }
-
- return [min, max];
-};
-
export default class RangeSlider extends Component {
constructor(props) {
super(props);
diff --git a/components/dash-core-components/src/fragments/Slider.react.js b/components/dash-core-components/src/fragments/Slider.react.js
index 178014e395..587761adbb 100644
--- a/components/dash-core-components/src/fragments/Slider.react.js
+++ b/components/dash-core-components/src/fragments/Slider.react.js
@@ -1,10 +1,11 @@
import React, {Component} from 'react';
import ReactSlider, {createSliderWithTooltip} from 'rc-slider';
-import {assoc, omit, pickBy} from 'ramda';
+import {assoc, omit} from 'ramda';
import computeSliderStyle from '../utils/computeSliderStyle';
import 'rc-slider/assets/index.css';
+import {calcMarks} from '../utils/computeSliderMarkers';
import {propTypes, defaultProps} from '../components/Slider.react';
/**
@@ -47,6 +48,10 @@ export default class Slider extends Component {
setProps,
tooltip,
updatemode,
+ min,
+ max,
+ marks,
+ step,
vertical,
verticalHeight,
} = this.props;
@@ -65,13 +70,6 @@ export default class Slider extends Component {
tipProps = tooltip;
}
- const truncatedMarks = this.props.marks
- ? pickBy(
- (k, mark) => mark >= this.props.min && mark <= this.props.max,
- this.props.marks
- )
- : this.props.marks;
-
return (
+ pickBy((k, mark) => mark >= min && mark <= max, marks);
+
+const truncateNumber = num =>
+ parseInt(num.toString().match(/^-?\d+(?:\.\d{0,0})?/)[0], 10);
+
+const decimalCount = d =>
+ String(d).split('.').length > 1 ? String(d).split('.')[1].length : 0;
+const alignIntValue = (v, d) =>
+ d < 10
+ ? v
+ : parseInt((truncateNumber(v / d) * d).toFixed(decimalCount(d)), 10);
+const alignDecimalValue = (v, d) =>
+ d < 10
+ ? parseFloat(v.toFixed(decimalCount(d)))
+ : parseFloat(((v / d).toFixed(0) * d).toFixed(decimalCount(d)));
+
+const alignValue = (v, d) =>
+ decimalCount(d) < 1 ? alignIntValue(v, d) : alignDecimalValue(v, d);
+
+const log = v => Math.floor(Math.log10(v));
+
+const getNearByStep = v =>
+ v < 10
+ ? [v]
+ : [
+ Math.pow(10, Math.floor(Math.log10(v))),
+ Math.pow(10, Math.ceil(Math.log10(v))) / 2,
+ alignValue(v, Math.pow(10, log(v))),
+ Math.pow(10, Math.ceil(Math.log10(v))),
+ ].sort((a, b) => Math.abs(a - v) - Math.abs(b - v));
+
+const estimateBestSteps = (minValue, maxValue, stepValue) => {
+ const desiredCountMin = 2 + (maxValue / stepValue <= 10 ? 3 : 3); // including start, end
+ const desiredCountMax = 2 + (maxValue / stepValue <= 10 ? 4 : 6);
+
+ const min = minValue / stepValue;
+ const max = maxValue / stepValue;
+
+ const rangeLength = max - min;
+
+ const leastMarksInterval = Math.max(
+ Math.round(rangeLength / (desiredCountMin - 1)),
+ 1
+ );
+ const possibleValues = getNearByStep(leastMarksInterval);
+
+ const finalStep =
+ possibleValues.find(step => {
+ const expectedSteps = Math.ceil(rangeLength / step) + 1;
+ return (
+ expectedSteps >= desiredCountMin - 1 &&
+ expectedSteps <= desiredCountMax + 1
+ );
+ }) || possibleValues[0];
+ return [
+ alignValue(min, finalStep) * stepValue,
+ alignValue(finalStep * stepValue, stepValue),
+ ];
+};
+
+export const autoGenerateMarks = (min, max, step = 1) => {
+ const marks = [];
+ const [start, interval] = estimateBestSteps(min, max, step);
+ let cursor = start + interval;
+
+ do {
+ marks.push(alignValue(cursor, step));
+ cursor += interval;
+ } while (cursor < max);
+
+ // do some cosmetic
+ const discardThreshold = 1.5;
+ if (
+ marks.length >= 2 &&
+ max - marks[marks.length - 2] <= interval * discardThreshold
+ ) {
+ marks.pop();
+ }
+
+ const marksObject = {};
+ marks.forEach(mark => {
+ marksObject[mark] = String(mark);
+ });
+ marksObject[min] = `Start (${min})`;
+ marksObject[max] = `End (${max})`;
+ return marksObject;
+};
+
+/**
+ * Set marks to min and max if not defined, truncate otherwise
+ */
+export const calcMarks = ({min, max, marks, step}) => {
+ return truncateMarks(
+ min,
+ max,
+ marks ? marks : autoGenerateMarks(min, max, step)
+ );
+};
+
+/**
+ * Calculate default step if not defined
+ */
+export const calcStep = (min, max, step) => {
+ if (step !== undefined) {
+ return step;
+ }
+
+ const size = Math.abs(max - min); // interval size
+ /**
+ * Size multiplied by 10^i to get a nice step value at the end (0.1, 1, 10, 100, ...)
+ */
+ const divident = size
+ .toString()
+ .replace('.', '') // removes decimal point
+ .replace(/^(\d*?[1-9])0+$/, '$1'); // removes trailing zeros
+
+ return size / divident;
+};
+
+/**
+ * Calculate default value if not defined
+ */
+export const calcValue = (min, max, value) => {
+ if (value !== undefined) {
+ return value;
+ }
+
+ return [min, max];
+};
From 74c25af528d01f73bef93c87b3eb23f71f32a363 Mon Sep 17 00:00:00 2001
From: workaholicpanda <>
Date: Sat, 11 Sep 2021 09:26:22 -0400
Subject: [PATCH 28/80] add number support for shorthanded options - Checklist,
Dropdown
---
.../src/components/Checklist.react.js | 14 +++++++-------
.../src/components/Dropdown.react.js | 4 ++--
.../src/fragments/Dropdown.react.js | 8 ++++----
3 files changed, 13 insertions(+), 13 deletions(-)
diff --git a/components/dash-core-components/src/components/Checklist.react.js b/components/dash-core-components/src/components/Checklist.react.js
index 8464531623..8b111f0961 100644
--- a/components/dash-core-components/src/components/Checklist.react.js
+++ b/components/dash-core-components/src/components/Checklist.react.js
@@ -35,13 +35,13 @@ export default class Checklist extends Component {
>
{options.map(option => {
option =
- type(option) === 'String'
- ? {
- label: option,
+ type(option) === 'Object'
+ ? option
+ : {
+ label: String(option),
value: option,
disabled: false,
- }
- : option;
+ };
return (