[doc] Recharts guidelines added to documentation

apps/website/screens/common/example/Example.tsx

@@ -44,12 +44,13 @@ type ExamplePropTypes = {
   actionsVisible?: boolean;
   defaultIsVisible?: boolean;
   example: {
-    scope: Record<string, unknown>;
+    scope?: Record<string, unknown>;
     code: string;
   };
+  onlyCode?: boolean;
 };
-//
-const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: ExamplePropTypes) => {
+
+const Example = ({ actionsVisible = true, defaultIsVisible = false, example, onlyCode = false }: ExamplePropTypes) => {
   const [isCodeVisible, changeIsCodeVisible] = useState(defaultIsVisible);
   const [liveCode, setLiveCode] = useState(example.code);
 
@@ -61,12 +62,14 @@ const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: E
   return (
     <DxcFlex direction="column" gap="var(--spacing-gap-m)">
       <LiveProvider code={liveCode} scope={example.scope} theme={theme}>
-        <StyledPreview>
-          <LivePreview />
-          <StyledError>
-            <LiveError />
-          </StyledError>
-        </StyledPreview>
+        {!onlyCode && (
+          <StyledPreview>
+            <LivePreview />
+            <StyledError>
+              <LiveError />
+            </StyledError>
+          </StyledPreview>
+        )}
         {actionsVisible && (
           <DxcFlex gap="var(--spacing-gap-s)" justifyContent="flex-end">
             {isCodeVisible && (
@@ -79,12 +82,14 @@ const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: E
                 }}
               />
             )}
-            <DxcButton
-              icon={isCodeVisible ? "code_off" : "code"}
-              label={isCodeVisible ? "Hide code" : "View code"}
-              mode="tertiary"
-              onClick={handleCodeOnClick}
-            />
+            {!onlyCode && (
+              <DxcButton
+                icon={isCodeVisible ? "code_off" : "code"}
+                label={isCodeVisible ? "Hide code" : "View code"}
+                mode="tertiary"
+                onClick={handleCodeOnClick}
+              />
+            )}
           </DxcFlex>
         )}
         {isCodeVisible && (

apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx

@@ -122,7 +122,7 @@ const sections = [
         title: "Application layout with components",
         content: (
           <iframe
-            src="https://codesandbox.io/embed/default-app-layout-s65j9x?view=split&hidenavigation=1&editorsize=0&fontsize=12&runonclick=1"
+            src="https://codesandbox.io/embed/default-app-layout-s65j9x?view=split&hidenavigation=1&editorsize=0&fontsize=12"
             style={{
               width: "100%",
               aspectRatio: "16/9",

apps/website/screens/components/footer/code/FooterCodePage.tsx

@@ -184,7 +184,7 @@ const sections = [
         title: "Footer in application layout",
         content: (
           <iframe
-            src="https://codesandbox.io/embed/default-footer-pf6l2y?view=split&hidenavigation=1&editorsize=0&fontsize=12&runonclick=1"
+            src="https://codesandbox.io/embed/default-footer-pf6l2y?view=split&hidenavigation=1&editorsize=0&fontsize=12&"
             style={{
               width: "100%",
               aspectRatio: "16/9",

apps/website/screens/components/header/code/HeaderCodePage.tsx

@@ -154,7 +154,7 @@ const sections = [
         title: "Header in application layout",
         content: (
           <iframe
-            src="https://codesandbox.io/embed/default-header-qpz6dj?view=split&hidenavigation=1&editorsize=0&fontsize=12&runonclick=1"
+            src="https://codesandbox.io/embed/default-header-qpz6dj?view=split&hidenavigation=1&editorsize=0&fontsize=12"
             style={{
               width: "100%",
               aspectRatio: "16/9",

apps/website/screens/components/sidenav/code/SidenavCodePage.tsx

@@ -202,7 +202,7 @@ const sections = [
         title: "Application layout with sidenav",
         content: (
           <iframe
-            src="https://codesandbox.io/embed/default-sidenav-cvxr3m?view=split&hidenavigation=1&editorsize=0&fontsize=12&runonclick=1"
+            src="https://codesandbox.io/embed/default-sidenav-cvxr3m?view=split&hidenavigation=1&editorsize=0&fontsize=12"
             style={{
               width: "100%",
               aspectRatio: "16/9",

apps/website/screens/guidelines/data-visualization/DataVisualizationPage.tsx

@@ -10,6 +10,7 @@ import barChartVariants from "./images/bar_chart_variants.png";
 import Example from "@/common/example/Example";
 import themeBarChart from "./examples/barChart";
 import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
+import { rechartsGuidelinesSection } from "./rechartsGuidelinesSection";
 
 const sections = [
   {
@@ -322,6 +323,7 @@ const sections = [
       </>
     ),
   },
+  rechartsGuidelinesSection,
 ];
 
 const DataVisualizationPage = () => (

apps/website/screens/guidelines/data-visualization/examples/rechartsAreaExample.tsx

@@ -0,0 +1,25 @@
+const code = `() => {
+  const data = [
+    { name: "Mon", uv: 4000, pv: 2400 },
+    { name: "Tue", uv: 3000, pv: 1398 },
+    { name: "Wed", uv: 2000, pv: 9800 },
+    { name: "Thu", uv: 2780, pv: 3908 },
+  ];
+
+  return (
+    <DxcInset space="var(--spacing-padding-l)">
+      <AreaChart
+        data={data}
+        xKey="name"
+        areas={[
+          { dataKey: "uv", name: "UV", color: "#5f249f" },
+          { dataKey: "pv", name: "PV", color: "#0095ff", fillOpacity: 0.12 },
+        ]}
+        layout={{ height: 300 }}
+        showLegend
+      />
+    </DxcInset>
+  );
+};`;
+
+export default { code, scope: {} };

apps/website/screens/guidelines/data-visualization/examples/rechartsBarExample.tsx

@@ -0,0 +1,26 @@
+const code = `() => {
+  const data = [
+    { name: "Q1", revenue: 4200, costs: 2400 },
+    { name: "Q2", revenue: 3000, costs: 1398 },
+    { name: "Q3", revenue: 2000, costs: 9800 },
+    { name: "Q4", revenue: 2780, costs: 3908 },
+  ];
+
+  return (
+    <DxcInset space="var(--spacing-padding-l)">
+      <BarChart
+        data={data}
+        xKey="name"
+        bars={[
+          { dataKey: "revenue", name: "Revenue", color: "#0095ff" },
+          { dataKey: "costs", name: "Costs", color: "#5f249f" },
+        ]}
+        axis={{ xLabel: "Quarter", yDomain: [0, 12000] }}
+        layout={{ height: 320, margin: { top: 16, right: 16, left: 8, bottom: 24 } }}
+        showLegend
+      />
+    </DxcInset>
+  );
+};`;
+
+export default { code, scope: {} };

apps/website/screens/guidelines/data-visualization/examples/rechartsHorizontalBarExample.tsx

@@ -0,0 +1,15 @@
+const code = `() => {
+  const data = [
+    { label: "Performance", value: 82, fill: "#0095ff" },
+    { label: "Reliability", value: 64, fill: "#5f249f" },
+    { label: "Security", value: 91, fill: "#24a148" },
+  ];
+
+  return (
+    <DxcInset space="var(--spacing-padding-l)">
+      <HorizontalBarChart data={data} styles={{ gap: "1.25rem", barHeight: 18 }} layout={{ width: "100%" }} />
+    </DxcInset>
+  );
+};`;
+
+export default { code, scope: {} };

apps/website/screens/guidelines/data-visualization/examples/rechartsLineExample.tsx

@@ -0,0 +1,27 @@
+const code = `() => {
+  const data = [
+    { month: "Jan", desktop: 400, mobile: 240 },
+    { month: "Feb", desktop: 300, mobile: 139 },
+    { month: "Mar", desktop: 200, mobile: 980 },
+    { month: "Apr", desktop: 278, mobile: 390 },
+  ];
+
+  return (
+    <DxcInset space="var(--spacing-padding-l)">
+      <LineChart
+        data={data}
+        xKey="month"
+        lines={[
+          { dataKey: "desktop", name: "Desktop", color: "#0095ff" },
+          { dataKey: "mobile", name: "Mobile", color: "#5f249f" },
+        ]}
+        axis={{ xLabel: "Month" }}
+        layout={{ height: 300 }}
+        showLegend
+        showBrush
+      />
+    </DxcInset>
+  );
+};`;
+
+export default { code, scope: {} };

apps/website/screens/guidelines/data-visualization/examples/rechartsPieExample.tsx

@@ -0,0 +1,16 @@
+const code = `() => {
+  const data = [
+    { name: "Chrome", value: 48 },
+    { name: "Safari", value: 32 },
+    { name: "Firefox", value: 14 },
+    { name: "Edge", value: 6 },
+  ];
+
+  return (
+    <DxcInset space="var(--spacing-padding-l)">
+      <PieChart data={data} variant="donut" axis={{ showLabels: true }} layout={{ height: 320 }} showLegend />
+    </DxcInset>
+  );
+};`;
+
+export default { code, scope: {} };

apps/website/screens/guidelines/data-visualization/rechartsGuidelinesSection.tsx

@@ -0,0 +1,164 @@
+import { DxcBulletedList, DxcFlex, DxcParagraph, DxcLink, DxcTypography } from "@dxc-technology/halstack-react";
+import Link from "next/link";
+import Example from "@/common/example/Example";
+import type { SectionType } from "@/common/Section";
+import Code from "@/common/Code";
+import rechartsBarExample from "./examples/rechartsBarExample";
+import rechartsLineExample from "./examples/rechartsLineExample";
+import rechartsAreaExample from "./examples/rechartsAreaExample";
+import rechartsPieExample from "./examples/rechartsPieExample";
+import rechartsHorizontalBarExample from "./examples/rechartsHorizontalBarExample";
+
+/** Maintainer: set this to the published playground URL (single app with all five wrappers). */
+const CODE_SANDBOX_REFERENCE_APP =
+  "https://codesandbox.io/embed/recharts-examples-p3hg24?view=split&hidenavigation=1&editorsize=0&fontsize=12";
+
+export const rechartsGuidelinesSection: SectionType = {
+  title: "Recharts wrappers (alternative)",
+  content: (
+    <>
+      <DxcParagraph>
+        Cloudscape remains our default recommendation for charting inside Halstack documentation and product patterns.
+        Some teams prefer a lighter, React-first charting stack.{" "}
+        <Link href="https://recharts.org/" passHref legacyBehavior>
+          <DxcLink>Recharts</DxcLink>
+        </Link>{" "}
+        composes well with custom layouts and Halstack primitives (for example <Code>DxcInset</Code>,{" "}
+        <Code>DxcFlex</Code>, and <Code>DxcContainer</Code>).
+      </DxcParagraph>
+      <DxcParagraph>
+        <DxcTypography fontWeight="var(--font-weight-bold)">
+          Halstack does not ship chart components today
+        </DxcTypography>
+        . The examples below use a small set of reference wrappers—patterns you can recreate in your own codebase—to
+        cover typical analytics views: vertical bars (including grouped series), lines (with optional brush), filled
+        areas, part-to-whole pies and donuts, and horizontal percentage bars for KPI-style rows.{" "}
+        <DxcTypography fontWeight="var(--font-weight-bold)">
+          They are illustrative, not a versioned API of the design system.
+        </DxcTypography>
+      </DxcParagraph>
+      <DxcParagraph>
+        Apply the same narrative guidance as the rest of this page (clear baselines, readable labels, sensible color
+        differentiation). Prefer Halstack categorical colors when you pass color or fill props so charts stay on-brand.
+      </DxcParagraph>
+    </>
+  ),
+  subSections: [
+    {
+      title: "When to use",
+      content: (
+        <DxcBulletedList>
+          <DxcBulletedList.Item>
+            Consider a thin Recharts wrapper layer when your product already standardizes on Recharts and you want
+            shared defaults for axes, grids, and tooltips.
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            Prefer Cloudscape charts when you need out-of-the-box AWS console patterns, their data-vis color tokens, or
+            parity with Cloudscape documentation.
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            Prefer raw Recharts when you need a chart type or behavior a wrapper does not expose yet.
+          </DxcBulletedList.Item>
+        </DxcBulletedList>
+      ),
+    },
+    {
+      title: "CodeSandbox playground",
+      content: (
+        <>
+          <DxcParagraph>
+            This page shows what the reference wrappers look like in context. For{" "}
+            <strong>prop definitions, defaults, limitations, and copy-paste source</strong>, open the companion
+            CodeSandbox: you can read each chart in depth and run the examples.
+          </DxcParagraph>
+          <DxcParagraph>
+            <iframe
+              src={CODE_SANDBOX_REFERENCE_APP}
+              style={{
+                width: "100%",
+                aspectRatio: "16/9",
+                border: "0",
+                borderRadius: "4px",
+                overflow: "hidden",
+                zoom: 0.5,
+              }}
+              title="Application layout with components"
+              sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+            />
+          </DxcParagraph>
+          <DxcParagraph>There you will find:</DxcParagraph>
+          <DxcBulletedList>
+            <DxcBulletedList.Item>
+              An overview of dependencies and how data is expected to be shaped.
+            </DxcBulletedList.Item>
+            <DxcBulletedList.Item>
+              A dedicated section for each wrapper—props, suggested use cases, and live demos.
+            </DxcBulletedList.Item>
+            <DxcBulletedList.Item>
+              Full source for all five components in one place so they stay in sync.
+            </DxcBulletedList.Item>
+          </DxcBulletedList>
+        </>
+      ),
+    },
+    {
+      title: "Bar chart",
+      content: (
+        <DxcFlex direction="column" gap="var(--spacing-gap-l)">
+          <DxcParagraph>
+            Compare categories or a few grouped series. Good default for quarterly metrics, counts by region, or
+            before/after snapshots.
+          </DxcParagraph>
+          <Example example={rechartsBarExample} defaultIsVisible onlyCode />
+        </DxcFlex>
+      ),
+    },
+    {
+      title: "Line chart",
+      content: (
+        <DxcFlex direction="column" gap="var(--spacing-gap-l)">
+          <DxcParagraph>
+            Show trends over time or ordered categories. Optional brush helps when the horizontal domain is long.
+          </DxcParagraph>
+          <Example example={rechartsLineExample} defaultIsVisible onlyCode />
+        </DxcFlex>
+      ),
+    },
+    {
+      title: "Area chart",
+      content: (
+        <DxcFlex direction="column" gap="var(--spacing-gap-l)">
+          <DxcParagraph>
+            Emphasize volume or cumulative change; gradients make stacked or overlapping series easier to read at a
+            glance.
+          </DxcParagraph>
+          <Example example={rechartsAreaExample} defaultIsVisible onlyCode />
+        </DxcFlex>
+      ),
+    },
+    {
+      title: "Pie chart",
+      content: (
+        <DxcFlex direction="column" gap="var(--spacing-gap-l)">
+          <DxcParagraph>
+            Part-to-whole with pie or donut variants. Best for a small number of segments; pair with a table if
+            precision matters.
+          </DxcParagraph>
+          <Example example={rechartsPieExample} defaultIsVisible onlyCode />
+        </DxcFlex>
+      ),
+    },
+    {
+      title: "Horizontal bar (KPI row)",
+      content: (
+        <DxcFlex direction="column" gap="var(--spacing-gap-l)">
+          <DxcParagraph>
+            Label + headline value + a 0-100 track—useful for scores, completion, or capability models without a full
+            Cartesian chart.
+          </DxcParagraph>
+          <Example example={rechartsHorizontalBarExample} defaultIsVisible onlyCode />
+        </DxcFlex>
+      ),
+    },
+  ],
+};