docs: add CPU profile example (opensearch-project#1034)

Co-authored-by: Robert Monfera <[email protected]>

packages/osd-charts/integration/jest_env_setup.ts

@@ -28,6 +28,4 @@ export const toMatchImageSnapshot = configureToMatchImageSnapshot({
 
 expect.extend({ toMatchImageSnapshot });
 
-if (process.env.DEBUG === 'true') {
-  jest.setTimeout(10 * 60 * 1000); // set timeout to 10 minutes;
-}
+jest.setTimeout(10 * 1000); // set timeout in milliseconds;

packages/osd-charts/stories/icicle/03_cpu_profile_flame.tsx

@@ -0,0 +1,58 @@
+/*
+ * 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 React from 'react';
+
+import { Chart, Datum, Partition, PartitionLayout, PrimitiveValue, Settings } from '../../src';
+import data from '../../src/mocks/hierarchical/cpu_profile_tree_mock.json';
+import { STORYBOOK_LIGHT_THEME } from '../shared';
+import { config } from '../utils/hierarchical_input_utils';
+import { discreteColor, viridis18 as palette } from '../utils/utils';
+
+const color = palette.slice().reverse();
+
+const getLayerSpec = (maxDepth: number = 30) =>
+  [...new Array(maxDepth + 1)].map((_, depth) => ({
+    groupByRollup: (d: Datum) => d.layers[depth],
+    nodeLabel: (d: PrimitiveValue) => String(d),
+    showAccessor: (d: PrimitiveValue) => d !== undefined,
+    shape: {
+      fillColor: () => discreteColor(color, 0.8)(depth),
+    },
+  }));
+
+export const Example = () => {
+  return (
+    <Chart className="story-chart">
+      <Settings theme={STORYBOOK_LIGHT_THEME} />
+      <Partition
+        id="spec_1"
+        data={data}
+        valueAccessor={(d: Datum) => d.value as number}
+        valueFormatter={() => ''}
+        layers={getLayerSpec()}
+        config={{
+          ...config,
+          partitionLayout: PartitionLayout.icicle,
+          drilldown: true,
+        }}
+      />
+    </Chart>
+  );
+};

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

@@ -26,5 +26,6 @@ export default {
   },
 };
 
+export { Example as cpuProfileFlameChart } from './03_cpu_profile_flame';
 export { Example as flameChart } from './02_unix_flame';
 export { Example as icicleChart } from './01_unix_icicle';

packages/osd-charts/tsconfig.json

@@ -18,6 +18,7 @@
     "skipLibCheck": true,
     "downlevelIteration": true,
     "typeRoots": ["./node_modules/@types/", "./global.d.ts"],
-    "stripInternal": true
+    "stripInternal": true,
+    "resolveJsonModule": true
   }
 }