Fix report chart resize (#2235)

bcgov · Aug 29, 2024 · c6343d5 · c6343d5
1 parent db3078e
commit c6343d5
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 21 deletions.
diff --git a/app/editor/src/features/admin/reports/ReportFormSections.tsx b/app/editor/src/features/admin/reports/ReportFormSections.tsx
@@ -30,7 +30,7 @@ import * as styled from './styled';
 import { createReportSection } from './utils';
 
 export const ReportFormSections = () => {
-  const { values, setFieldValue } = useFormikContext<IReportModel>();
+  const { values, setFieldValue, setValues } = useFormikContext<IReportModel>();
   const [{ filters }, { findFilters }] = useFilters();
   const [{ folders }, { findFolders }] = useFolders();
 
@@ -85,16 +85,33 @@ export const ReportFormSections = () => {
   };
 
   const handleDelete = (index: number) => {
-    var sections = [...values.sections];
-    sections.splice(index, 1);
-    if (index === section?.sortOrder) setSection(undefined);
-    setFieldValue(
-      `sections`,
-      sections.map((s, i) => ({
-        ...s,
-        sortOrder: i,
-      })),
-    );
+    if (!section) return;
+
+    // Remove the content from the removed section in the current instance.
+    const instance = values.instances.length ? { ...values.instances[0] } : undefined;
+    if (instance) {
+      const sectionNames = values.sections
+        .filter((s) => s.name !== section.name)
+        .map((s) => s.name);
+      const content = instance
+        ? instance.content.filter((c) => sectionNames.includes(c.sectionName))
+        : [];
+      instance.content = content;
+    }
+
+    if (index === section.sortOrder) setSection(undefined);
+    setValues({
+      ...values,
+      sections: values.sections
+        .filter((s, i) => i !== index)
+        .map((section, index) => ({
+          ...section,
+          sortOrder: index,
+        })),
+      instances: instance
+        ? values.instances.map((original, index) => (index === 0 ? instance : original))
+        : values.instances,
+    });
   };
 
   return (

diff --git a/app/subscriber/src/features/my-reports/edit/settings/ReportEditTemplateForm.tsx b/app/subscriber/src/features/my-reports/edit/settings/ReportEditTemplateForm.tsx
@@ -37,17 +37,35 @@ export const ReportEditTemplateForm = () => {
 
   const removeSection = React.useCallback(
     (index: number) => {
-      setFieldValue(
-        'sections',
-        values.sections
+      const section = values.sections.length > index ? values.sections[index] : undefined;
+      if (!section) return;
+
+      // Remove the content from the removed section in the current instance.
+      const instance = values.instances.length ? { ...values.instances[0] } : undefined;
+      if (instance) {
+        const sectionNames = values.sections
+          .filter((s) => s.name !== section.name)
+          .map((s) => s.name);
+        const content = instance
+          ? instance.content.filter((c) => sectionNames.includes(c.sectionName))
+          : [];
+        instance.content = content;
+      }
+
+      setValues({
+        ...values,
+        sections: values.sections
           .filter((s, i) => i !== index)
           .map((section, index) => ({
             ...section,
             sortOrder: index,
           })),
-      );
+        instances: instance
+          ? values.instances.map((original, index) => (index === 0 ? instance : original))
+          : values.instances,
+      });
     },
-    [setFieldValue, values.sections],
+    [setValues, values],
   );
 
   /** function that runs after a user drops an item in the list */

diff --git a/app/subscriber/src/features/my-reports/edit/settings/template/utils/groupData.ts b/app/subscriber/src/features/my-reports/edit/settings/template/utils/groupData.ts
@@ -40,7 +40,7 @@ export const groupData = (
   } else if (groupBy === 'source') {
     result = getChartData(chart, datasets, sections, {
       ...options,
-      groupOn: (c) => c?.content?.otherSource,
+      groupOn: (c) => c?.content?.otherSource.toLocaleLowerCase(),
       getLabel: (c) => c?.content?.otherSource,
     });
   } else if (groupBy === 'series') {
@@ -53,7 +53,7 @@ export const groupData = (
   } else if (groupBy === 'byline') {
     result = getChartData(chart, datasets, sections, {
       ...options,
-      groupOn: (c) => c?.content?.byline,
+      groupOn: (c) => c?.content?.byline.toLocaleLowerCase(),
       labelValueWhenEmpty: 'Unknown',
     });
   } else if (groupBy === 'contentType') {

diff --git a/libs/net/template/ReportEngine.cs b/libs/net/template/ReportEngine.cs
@@ -227,7 +227,7 @@ public async Task<string> GenerateBase64ImageAsync(
         // Send request to Charts API to generate base64
         var body = new StringContent(dataJson, Encoding.UTF8, System.Net.Mime.MediaTypeNames.Application.Json);
         var width = model.ChartTemplate.SectionSettings.Width.HasValue ? $"width={model.ChartTemplate.SectionSettings.Width.Value}" : "";
-        var height = model.ChartTemplate.SectionSettings.Height.HasValue ? $"&height={model.ChartTemplate.SectionSettings.Height.Value}" : "";
+        var height = model.ChartTemplate.SectionSettings.Height.HasValue ? $"{(String.IsNullOrWhiteSpace(width) ? "" : "&")}height={model.ChartTemplate.SectionSettings.Height.Value}" : "";
         var response = await this.HttpClient.PostAsync(
             this.ChartsOptions.Url.Append(
                 this.ChartsOptions.Base64Path,
@@ -244,7 +244,7 @@ public async Task<string> GenerateBase64ImageAsync(
     /// <param name="settings"></param>
     /// <param name="minAxisColumnWidth"></param>
     /// <returns></returns>
-    private static bool ShouldResize(ChartDataModel data, API.Models.Settings.ChartSectionSettingsModel settings, int minAxisColumnWidth)
+    private bool ShouldResize(ChartDataModel data, API.Models.Settings.ChartSectionSettingsModel settings, int minAxisColumnWidth)
     {
         var axisLabelCount = data.Labels.Length;
         var size = settings.IsHorizontal == false ? settings.Height : settings.Width;
@@ -410,7 +410,7 @@ await section.ChartTemplates.ForEachAsync(async chart =>
                         settings.UseAllContent ? null : content);
                     var chartRequestModel = new ChartRequestModel(chartModel);
                     var base64Image = await this.GenerateBase64ImageAsync(chartRequestModel);
-                    this.Logger.LogDebug("Chart generated, sectionId:{sectionId} chartId:{chartId}", section.Id, chart.Id);
+                    this.Logger.LogDebug("Chart generated, reportId:{reportId} instanceId:{instance} sectionId:{sectionId} chartId:{chartId}", report.Id, reportInstance?.Id, section.Id, chart.Id);
 
                     // Replace Chart Stubs with the generated image.
                     body = body.Replace(ReportSectionModel.GenerateChartUid(section.Id, chart.Id), base64Image);