Bugfix/time brush render (#220)

* fix small bugs inside time brush component * yarn fix * yarn version check * yarn version check * changes
microsoft · Oct 9, 2023 · 5292536 · 5292536
1 parent 1ebe587
commit 5292536
Show file tree

Hide file tree

Showing 4 changed files with 218 additions and 8 deletions.
diff --git a/.yarn/versions/715a58d0.yml b/.yarn/versions/715a58d0.yml
@@ -0,0 +1,5 @@
+releases:
+  "@essex/components": major
+
+declined:
+  - essex-toolkit-stories
diff --git a/packages/components/src/TimeBrush/SparkBar.tsx b/packages/components/src/TimeBrush/SparkBar.tsx
@@ -55,7 +55,7 @@ export const Sparkbar: React.FC<SparkbarProps> = memo(function Sparkbar({
 
 	useLayoutEffect(() => {
 		setBarGroup(createBarGroup(ref, theme, width, height))
-	}, [theme, data, width, height])
+	}, [theme, width, height])
 
 	useLayoutEffect(() => {
 		generate(

diff --git a/packages/components/src/TimeBrush/TimeBrush.stories.tsx b/packages/components/src/TimeBrush/TimeBrush.stories.tsx
@@ -17,7 +17,7 @@ const PrimaryComponent: React.FC<TimeBrushProps> = (args) => {
 	const [to, setTo] = useState<string>('to')
 
 	const handleOnChange = useCallback(
-		(from: string, to: string) => {
+		(from: Date, to: Date) => {
 			setFrom(from)
 			setTo(to)
 		},
@@ -31,6 +31,194 @@ const PrimaryComponent: React.FC<TimeBrushProps> = (args) => {
 	)
 }
 
+const defaultItems2 = [
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-01T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 161,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-02T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 133,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-03T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 101,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-04T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 108,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-05T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 124,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-06T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 182,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-07T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 152,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-08T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 180,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-09T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 142,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-10T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 116,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-11T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 128,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-12T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 115,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-13T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 102,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-14T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 131,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-15T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 124,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-16T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 122,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-17T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 88,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-18T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 84,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-19T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 124,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-20T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 122,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-21T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 102,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-22T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 139,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-23T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 107,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-24T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 79,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-25T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 84,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-26T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 101,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-27T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 93,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-28T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 119,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-29T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 114,
+	},
+	{
+		__typename: 'DatesHistogramBar',
+		date: new Date('2023-06-30T00:00:00'),
+		term: 'DocumentCreateDate',
+		count: 98,
+	},
+]
+
+const startDate = new Date('2023-06-01T00:00:00')
+const endDate = new Date('2023-06-30T00:00:00')
+
+const defaultRange2 = [startDate, endDate]
+
 const defaultItems = [
 	{
 		date: new Date('2019-12-15T00:00:00.000Z'),
@@ -919,15 +1107,32 @@ const defaultItems = [
 	},
 ]
 
+const defaultRange = [
+	new Date('2019-12-15T00:00:00.000Z'),
+	new Date('2020-06-08T00:00:00.000Z'),
+]
+
+const defaultItems3 = [
+	{
+		date: '2014-01-23T00:00:00',
+		term: 'DocumentCreateDate',
+		count: 4063,
+		__typename: 'DatesHistogramBar',
+	},
+]
+
+const defaultRange3 = [
+	new Date('2014-01-23T00:00:00'),
+	new Date('2014-01-23T00:00:00'),
+]
+
 export const Primary = {
 	render: (args: TimeBrushProps) => <PrimaryComponent {...args} />,
 	args: {
 		width: 800,
 		height: 200,
-		dateRange: [
-			new Date('2019-12-15T00:00:00.000Z'),
-			new Date('2020-06-08T00:00:00.000Z'),
-		],
-		elements: defaultItems,
+		chartWidth: 800,
+		dateRange: defaultRange2,
+		elements: defaultItems2,
 	},
 }
diff --git a/packages/components/src/TimeBrush/TimeBrush.tsx b/packages/components/src/TimeBrush/TimeBrush.tsx
@@ -33,7 +33,7 @@ export const TimeBrush: React.FC<TimeBrushProps> = memo(function TimeBrush({
 			return (chartWidth - delta * BAR_GAP) / delta
 		}
 		return DEFAULT_BAR_WIDTH
-	}, [chartWidth, dateRange])
+	}, [dateRange, chartWidth])
 
 	const handleBrushEnd = useCallback(
 		(range: [Date, Date] | null) => {