add bubble to patents

Author: folland87

client/src/api/patents/aggregate/analytic-tool.ts

@@ -53,17 +53,9 @@ export async function aggregatePatentsForAnalyticTool(
       },
       byCpc: {
         terms: {
-          field: "cpc.classe.code.keyword",
+          field: "cpc.classe.id_name.keyword",
           size: 10000,
         },
-        aggs: {
-          bySectionLabel: {
-            terms: {
-              field: "cpc.section.label.keyword",
-              size: 1,
-            },
-          },
-        },
       },
     }
   }
@@ -76,6 +68,9 @@ export async function aggregatePatentsForAnalyticTool(
   const result = await res.json()
   const { aggregations: data} = result;
 
+  console.log(data?.byCpc?.buckets)
+
+
   const _100Year =
     data?.byYear?.buckets &&
     Math.max(...data.byYear.buckets.map((el) => el.doc_count));
@@ -107,9 +102,17 @@ export async function aggregatePatentsForAnalyticTool(
     }
   }).filter(el => el) || [];
   const patentsCount = data.patentsCount?.value;
+  const byCpc = data?.byCpc?.buckets?.map((element) => {
+    return {
+      value: element.key.split("###")?.[0],
+      label: element.key.split("###")?.[1],
+      count: element.doc_count,
+    }
+  }).filter(el => el) || [];
   return {
     byInventors,
     byApplicants,
+    byCpc,
     patentsCount,
     byYear,
   };

client/src/components/patent-chart/cpc.tsx

@@ -0,0 +1,143 @@
+import React from "react";
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+import HighchartsMore from "highcharts/highcharts-more";
+import { Aggregation } from "../../types/commons";
+
+HighchartsMore(Highcharts);
+
+type CpcChartProps = {
+  data: Aggregation[];
+};
+
+const sectionLabels: Record<string, string> = {
+  A: "Nécessités courantes de la vie",
+  B: "Techniques industrielles diverses; transports",
+  C: "Chimie; métallurgie",
+  D: "Textiles; papier",
+  E: "Constructions fixes",
+  F: "Mécanique; éclairage; chauffage; armement; sautage",
+  G: "Physique",
+  H: "Electricité",
+  Y: "Technologies émergentes ou celles qui couvrent plusieurs sections",
+};
+
+const CpcChart: React.FC<CpcChartProps> = ({ data }) => {
+  const colorPalette = [
+    "#7AB1E8",
+    "#21AB8E",
+    "#f6e157",
+    "#CE70CC",
+    "#FF9575",
+    "#FFCA00",
+    "#FF732C",
+    "#E6BE92",
+    "#AEA397",
+  ];
+  const groupedData = data.reduce((acc, item) => {
+    const firstLetter = item.value.charAt(0).toUpperCase();
+    if (!acc[firstLetter]) acc[firstLetter] = [];
+    acc[firstLetter].push({
+      name: item.value,
+      value: item.count,
+      label: item.label,
+    });
+    return acc;
+  }, {} as Record<string, { name: string; value: number; label: string }[]>);
+
+  const seriesData = Object.entries(groupedData).map(
+    ([letter, items], index) => {
+      const totalCount = items.reduce((sum, item) => sum + item.value, 0);
+      return {
+        name: `Section ${sectionLabels[letter]}`,
+        color: colorPalette[index % colorPalette.length],
+        data: items.map((item) => ({
+          name: item.name,
+          value: item.value,
+          label: item.label,
+        })),
+        totalCount,
+      };
+    }
+  );
+
+  const values = seriesData.flatMap((series) =>
+    series.data.map((point) => point.value)
+  );
+  const zMin = Math.min(...values);
+  const zMax = Math.max(...values);
+
+  const options = {
+    chart: {
+      type: "packedbubble",
+      backgroundColor: "#f4f4f4",
+      height: "600px",
+    },
+    title: {
+      text: null,
+    },
+    tooltip: {
+      formatter: function () {
+        const pointName =
+          this.point.name && this.point.name !== "undefined"
+            ? `<b>${this.point.name}</b>`
+            : "";
+        const pointLabel =
+          this.point.label && this.point.label !== "undefined"
+            ? `<b>${this.point.label}</b>`
+            : "";
+        const familiesText = `Familles de brevets: ${this.point.value}`;
+
+        const sectionName = this.series.name;
+        const totalCount = this.series.data.reduce(
+          (sum, item) => sum + item.value,
+          0
+        );
+        const totalFamiliesText = `${totalCount} famille${totalCount > 1 ? "s" : ""}`
+
+        if (!pointName && !pointLabel) {
+          return `<b>${sectionName}</b>: ${totalFamiliesText}`;
+        }
+
+        return `${pointName} ${
+          pointLabel ? `- ${pointLabel}` : ""
+        }: ${familiesText}`;
+      },
+    },
+
+    plotOptions: {
+      packedbubble: {
+        minSize: "45%",
+        maxSize: "120%",
+        zMin: zMin,
+        zMax: zMax,
+        layoutAlgorithm: {
+          gravitationalConstant: 0.05,
+          splitSeries: true,
+          seriesInteraction: false,
+          parentNodeLimit: true,
+        },
+        dataLabels: {
+          enabled: true,
+          formatter: function () {
+            return this.point.name !== "undefined" ? this.point.name : "";
+          },
+          style: {
+            color: "black",
+            textOutline: "none",
+            fontWeight: "normal",
+          },
+        },
+      },
+    },
+    series: seriesData,
+  };
+
+  return (
+    <>
+      <HighchartsReact highcharts={Highcharts} options={options} />
+    </>
+  );
+};
+
+export default CpcChart;

client/src/pages/analytics/patents/components/content.tsx

@@ -4,6 +4,8 @@ import getBarChartOptions from "../../../../components/analytics-graph/graph-opt
 import getYearChartOptions from "../../../../components/analytics-graph/graph-options/years";
 import AnalyticsSkeleton from "../../../../components/skeleton/analytics-skeleton";
 import usePatentsAnalyticsData from "../hooks/usePatentsAnalyticsData";
+import CpcChart from "../../../../components/patent-chart/cpc";
+
 
 
 export default function PatentsAnalyticsContent() {
@@ -15,7 +17,8 @@ export default function PatentsAnalyticsContent() {
 		byInventors,
 		byApplicants,
 		patentsCount,
-		byYear: patentsByYear,
+		byYear,
+		byCpc,
 	} = data;
 
 	const patentInventorsOptions = getBarChartOptions({
@@ -27,7 +30,7 @@ export default function PatentsAnalyticsContent() {
 		colors: ["var(--organizations-analytics)"],
 	});
 	const patentYearsOptions = getYearChartOptions({
-		data: patentsByYear,
+		data: byYear,
 		colors: ["var(--patents-analytics)"],
 	});
 
@@ -62,6 +65,21 @@ export default function PatentsAnalyticsContent() {
 						options={patentApplicantsOptions}
 					/>
 				</Col>
+				<Col xs="12">
+            <div className="fr-pb-3w">
+              <div style={{ display: 'flex', alignItems: 'start' }}>
+                <div style={{ flexGrow: 1 }}>
+                  <Title as="h2" className="fr-text--md fr-text--bold fr-m-0">
+                    Répartition par classification CPC
+                  </Title>
+                  <p className="fr-text--xs fr-text-mention--grey">Domaines technologiques identifiés dans les familles de brevets</p>
+                </div>
+              </div>
+              <div style={{ height: "600px"}}>
+                <CpcChart data={byCpc} />
+              </div>
+            </div>
+				</Col>
 			</Row>
 		</>
 	);

client/src/types/patent.ts

@@ -91,6 +91,7 @@ export type PatentsAggregationsForAnalyticTool = {
   byInventors: Aggregation[];
   patentsCount: number;
   byYear: Aggregation[];
+  byCpc: Aggregation[];
 };
 
 export type ExportPatent = {