fix(Histogram): provided testing interface

bento-platform · Mar 7, 2024 · 3805aa5 · 3805aa5
1 parent 6002c58
commit 3805aa5
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 18 deletions.
diff --git a/test/js/TestHistogram.tsx b/test/js/TestHistogram.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Space } from 'antd';
+import { Histogram } from '../../src/index';
+import ResizableCard from './Util/ResizableCard';
+
+const TestBarChart: React.FC = () => {
+  const [sizeStateResponsive, setSizeStateResponsive] = React.useState({ width: 500, height: 500 });
+  const [sizeStateFixed, setSizeStateFixed] = React.useState({ width: 960, height: 600 });
+  return (
+    <Space direction="vertical" size={150}>
+      <ResizableCard title="Fixed Histogram" sizeState={sizeStateFixed} onSizeChange={setSizeStateFixed}>
+        <Histogram
+          data={[
+            { x: 'AB', y: 50 },
+            { x: 'NB', y: 75 },
+            { x: 'SB', y: 60 },
+            { x: 'AU', y: 30 },
+            { x: 'XA', y: 80 },
+            { x: 'BB', y: 50 },
+            { x: 'BC', y: 75 },
+            { x: 'BD', y: 60 },
+            { x: 'BE', y: 30 },
+            { x: 'BF', y: 80 },
+          ]}
+          units="management units"
+          height={sizeStateFixed.height}
+          width={sizeStateFixed.width}
+        />
+      </ResizableCard>
+      <ResizableCard title="Responsive Histogram" sizeState={sizeStateResponsive} onSizeChange={setSizeStateResponsive}>
+        <Histogram
+          data={[
+            { x: 'AB', y: 50 },
+            { x: 'NB', y: 75 },
+            { x: 'SB', y: 60 },
+            { x: 'AU', y: 30 },
+            { x: 'XA', y: 80 },
+          ]}
+          units="management units"
+          height={sizeStateResponsive.height}
+        />
+      </ResizableCard>
+    </Space>
+  );
+};
+
+export default TestBarChart;
diff --git a/test/js/index.tsx b/test/js/index.tsx
@@ -11,6 +11,7 @@ import '../../src/styles.css';
 import { ChartConfigProvider } from '../../src';
 
 import TestBarChart from './TestBarChart';
+import TestHistogram from './TestHistogram';
 import TestChoroplethMap from './TestChoroplethMap';
 import TestPieChart from './TestPieChart';
 import TestPointMap from './TestPointMap';
@@ -19,31 +20,28 @@ const items: TabsProps['items'] = [
   {
     key: 'bar',
     label: 'Chart: Bar',
-    children: (
-      <TestBarChart />
-    ),
+    children: <TestBarChart />,
+  },
+  {
+    key: 'histogram',
+    label: 'Chart: Histogram',
+    children: <TestHistogram />,
   },
   {
     key: 'pie',
     label: 'Chart: Pie',
-    children: (
-      <TestPieChart />
-    ),
+    children: <TestPieChart />,
   },
   {
     key: 'choropleth',
     label: 'Map: Choropleth',
-    children: (
-      <TestChoroplethMap />
-    ),
+    children: <TestChoroplethMap />,
   },
   {
     key: 'points',
     label: 'Map: Points',
-    children: (
-      <TestPointMap />
-    ),
-  }
+    children: <TestPointMap />,
+  },
 ];
 
 const RoutedApp = () => {
@@ -52,15 +50,15 @@ const RoutedApp = () => {
 
   return (
     <Layout>
-      <Layout.Content style={{ padding: 24, height: "100vh" }}>
+      <Layout.Content style={{ padding: 24, height: '100vh' }}>
         <Card>
           <Typography.Title level={1}>Bento Charts Test App</Typography.Title>
           <Tabs items={items} activeKey={tab} onChange={(key) => navigate(`/${key}`)} />
         </Card>
       </Layout.Content>
     </Layout>
   );
-}
+};
 
 const BentoChartsTestApp = () => {
   return (
@@ -76,6 +74,4 @@ const BentoChartsTestApp = () => {
 };
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-root.render(
-  <BentoChartsTestApp />
-);
+root.render(<BentoChartsTestApp />);