fix(partition): elimination of zero values (opensearch-project#658)

Ignore not only negative values but also zero values.

fix opensearch-project#642

packages/osd-charts/src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.test.ts

@@ -0,0 +1,46 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License. */
+
+import { getHierarchyOfArrays } from './hierarchy_of_arrays';
+
+const rawFacts = [
+  { sitc1: '7', exportVal: 0 },
+  { sitc1: '3', exportVal: 3 },
+  { sitc1: 'G', exportVal: 1 },
+  { sitc1: '5', exportVal: -8 },
+];
+
+const valueAccessor = (d: any) => d.exportVal;
+
+const groupByRollupAccessors = [() => null, (d: any) => d.sitc1];
+
+describe('Test', () => {
+  test('getHierarchyOfArrays should omit zero and negative values', () => {
+    const outerResult = getHierarchyOfArrays(rawFacts, valueAccessor, groupByRollupAccessors);
+    expect(outerResult.length).toBe(1);
+
+    const results = outerResult[0];
+    expect(results.length).toBe(2);
+    expect(results[0]).toBeNull();
+
+    const result = results[1];
+    const expectedLength = rawFacts.filter((d: any) => valueAccessor(d) > 0).length;
+    expect(expectedLength).toBe(2);
+    expect(result.children.length).toBe(expectedLength);
+  });
+});

packages/osd-charts/src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.ts

@@ -38,7 +38,7 @@ export function getHierarchyOfArrays(
 
   const facts = rawFacts.filter((n) => {
     const value = valueAccessor(n);
-    return Number.isFinite(value) && value >= 0;
+    return Number.isFinite(value) && value > 0;
   });
 
   // don't render anything if the total, the width or height is not positive

packages/osd-charts/stories/treemap/9_zero_values.tsx

@@ -0,0 +1,59 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License. */
+
+import { Chart, Datum, Partition, PartitionLayout } from '../../src';
+import { mocks } from '../../src/mocks/hierarchical/index';
+import { config } from '../../src/chart_types/partition_chart/layout/config/config';
+import { arrayToLookup, hueInterpolator } from '../../src/chart_types/partition_chart/layout/utils/calcs';
+import { productDimension } from '../../src/mocks/hierarchical/dimension_codes';
+import { palettes } from '../../src/mocks/hierarchical/palettes';
+import React from 'react';
+
+const productLookup = arrayToLookup((d: Datum) => d.sitc1, productDimension);
+
+// style calcs
+const interpolatorCET2s = hueInterpolator(palettes.CET2s.map(([r, g, b]) => [r, g, b, 0.7]));
+
+const defaultFillColor = (colorMaker: any) => (d: any, i: number, a: any[]) => colorMaker(i / (a.length + 1));
+
+export const example = () => (
+  <Chart className="story-chart">
+    <Partition
+      id="spec_1"
+      data={mocks.pie.map((d: any, i: number) => (i ? d : { ...d, exportVal: 0 }))}
+      valueAccessor={(d: Datum) => d.exportVal as number}
+      valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`}
+      layers={[
+        {
+          groupByRollup: (d: Datum) => d.sitc1,
+          nodeLabel: (d: Datum) => productLookup[d].name,
+          fillLabel: {
+            textInvertible: true,
+            valueFormatter: (d: number) => `${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`,
+          },
+          shape: {
+            fillColor: defaultFillColor(interpolatorCET2s),
+          },
+        },
+      ]}
+      config={{
+        partitionLayout: PartitionLayout.treemap,
+      }}
+    />
+  </Chart>
+);

packages/osd-charts/stories/treemap/treemap.stories.tsx

@@ -33,3 +33,4 @@ export { example as multiColor } from './5_multicolor';
 export { example as customStyle } from './6_custom_style';
 export { example as percentage } from './7_percentage';
 export { example as grooveText } from './8_groove_text';
+export { example as zeroValues } from './9_zero_values';