Populating datasets with relative indexing

Question

Populating datasets with relative indexing

I am working on a code where I need to fill the datasets with the property isProjected set to 1. There are 3 datasets - lower estimate, projected, and upper estimate. The goal is to fill the Lower Estimate and Upper Estimate with a background color of rgba(252, 0, 47, 0.2) while leaving the Projected dataset unfilled (fill: false). However, the current code fills all 3 datasets. "Upper Estimate" should be filled with -1, "Lower Estimate" with +1, and "Projected" left unfilled.

View image description here

This is what I have attempted so far. Here is the buildChart config code:

buildChartConfig(data: DataConfig): ChartConfiguration {
    
    const newData: ChartData = { ... }
    ...

This is the dataset defaults code:

export const datasetDefaults = (value, index, colorType) => { 
    ...

And this is the code snippet that assigns the isProjected property a value of 1:

[...datasets, { ... }]

angular typescript

Answer 1

Answer №1

Here is the updated code snippet:

createChartConfig(data: DataConfiguration): ChartSetup {
  const newData: ChartData = {
    ...data,
    datasets: data.datasets.map((val, index, arr) => {
      const checkProjection = (dataset: DatasetConfiguration) => dataset.isProjected;

      const config = {
        ...defaultDataset(val, index, this.colorType),
        ...val,
        ...(checkProjection(val) && {
          fill: checkProjection(val) ? '0' : '-1', 
          backgroundColor: checkProjection(val)
            ? 'rgba(252, 0, 47, 0)'
            : 'rgba(252, 0, 47, 0.2)',
        }),
      };

      return config;
    }),
  } as ChartData;
}

Answer 2

Here is the updated code snippet:

createChartConfig(data: DataConfiguration): ChartSetup {
  const newData: ChartData = {
    ...data,
    datasets: data.datasets.map((val, index, arr) => {
      const checkProjection = (dataset: DatasetConfiguration) => dataset.isProjected;

      const config = {
        ...defaultDataset(val, index, this.colorType),
        ...val,
        ...(checkProjection(val) && {
          fill: checkProjection(val) ? '0' : '-1', 
          backgroundColor: checkProjection(val)
            ? 'rgba(252, 0, 47, 0)'
            : 'rgba(252, 0, 47, 0.2)',
        }),
      };

      return config;
    }),
  } as ChartData;
}

Answer 3

Answer №2

composeChartConfig(details: DataConfig): ChartConfiguration {
console.log('Data Being Analyzed:', details);

const freshData: ChartData = {
  ...details,
  datasets: details.datasets.map((value, i, array) => {
    const flagProjected = (dataPoint: DatasetConfig) => dataPoint.isProjected;
    console.log('Is Projected:', flagProjected(value));
    console.log('Position in Array:', i);
    console.log('First Projected Index:', array.findIndex(flagProjected));

    const outcome: CustomChartDataset = {
      ...setDefaultsForDataset(value, i, this.colorType),
      ...value,
      ...(flagProjected(value) &&
        i === array.findIndex(flagProjected) && {
          fill: 'origin',
          backgroundColor: 'rgba(252, 0, 47, 0.25)',
          borderColor: 'rgba(252, 0, 47, 0.25)',
          isProjected: true,
        }),
      ...(flagProjected(value) &&
        i === array.slice().reverse().findIndex(flagProjected) && {
          fill: false,
          backgroundColor: '#FC002F',
          borderColor: '#FC002F',
          isProjected: true,
        }),
    };

    console.log('Final Result:', outcome);
    return outcome;
  }),
} as ChartData;

Answer 4

composeChartConfig(details: DataConfig): ChartConfiguration {
console.log('Data Being Analyzed:', details);

const freshData: ChartData = {
  ...details,
  datasets: details.datasets.map((value, i, array) => {
    const flagProjected = (dataPoint: DatasetConfig) => dataPoint.isProjected;
    console.log('Is Projected:', flagProjected(value));
    console.log('Position in Array:', i);
    console.log('First Projected Index:', array.findIndex(flagProjected));

    const outcome: CustomChartDataset = {
      ...setDefaultsForDataset(value, i, this.colorType),
      ...value,
      ...(flagProjected(value) &&
        i === array.findIndex(flagProjected) && {
          fill: 'origin',
          backgroundColor: 'rgba(252, 0, 47, 0.25)',
          borderColor: 'rgba(252, 0, 47, 0.25)',
          isProjected: true,
        }),
      ...(flagProjected(value) &&
        i === array.slice().reverse().findIndex(flagProjected) && {
          fill: false,
          backgroundColor: '#FC002F',
          borderColor: '#FC002F',
          isProjected: true,
        }),
    };

    console.log('Final Result:', outcome);
    return outcome;
  }),
} as ChartData;

Answer 5

Answer №3

After implementing a new flag that calculates specific projections, the chart configuration now accurately displays the desired outcome.` buildChartConfig(data: DataConfiguration): ChartSetup { console.log('Current Data:', data);

const updatedData: ChartData = {
  ...data,
  datasets: data.datasets.map((dataset, index, array) => {
    const isProjectedFlag = (config: DatasetConfiguration) => config.isProjected;
   
    const isFirstFlagged = index === array.findIndex(isProjectedFlag);
    const isLastFlagged =
      index ===
      array.length - 1 - array.slice().reverse().findIndex(isProjectedFlag);

    const customDisplay: CustomChartDataset = {
      ...adjustDefaults(dataset, index, this.colorType), //modified
      ...dataset,
      ...(isProjectedFlag(dataset) &&
        (isFirstFlagged || isLastFlagged) && {
          fill: 'origin',
          backgroundColor: 'rgba(252, 0, 47, 0.25)',
          borderColor: 'rgba(252, 0, 47, 0.25)',
          isProjected: true,
        }),
      ...(isProjectedFlag(dataset) && //prediction
        !(isFirstFlagged || isLastFlagged) && {
          fill: false,
          backgroundColor: '#FC002F',
          borderColor: '#FC002F',
          isProjected: true,
        }),
    };
    console.log('Updated Result:', customDisplay);
    return customDisplay;
  }),
} as ChartData;`

Answer 6

After implementing a new flag that calculates specific projections, the chart configuration now accurately displays the desired outcome.` buildChartConfig(data: DataConfiguration): ChartSetup { console.log('Current Data:', data);

const updatedData: ChartData = {
  ...data,
  datasets: data.datasets.map((dataset, index, array) => {
    const isProjectedFlag = (config: DatasetConfiguration) => config.isProjected;
   
    const isFirstFlagged = index === array.findIndex(isProjectedFlag);
    const isLastFlagged =
      index ===
      array.length - 1 - array.slice().reverse().findIndex(isProjectedFlag);

    const customDisplay: CustomChartDataset = {
      ...adjustDefaults(dataset, index, this.colorType), //modified
      ...dataset,
      ...(isProjectedFlag(dataset) &&
        (isFirstFlagged || isLastFlagged) && {
          fill: 'origin',
          backgroundColor: 'rgba(252, 0, 47, 0.25)',
          borderColor: 'rgba(252, 0, 47, 0.25)',
          isProjected: true,
        }),
      ...(isProjectedFlag(dataset) && //prediction
        !(isFirstFlagged || isLastFlagged) && {
          fill: false,
          backgroundColor: '#FC002F',
          borderColor: '#FC002F',
          isProjected: true,
        }),
    };
    console.log('Updated Result:', customDisplay);
    return customDisplay;
  }),
} as ChartData;`

Populating datasets with relative indexing

Answer №1

Answer №2

Answer №3

Similar questions

What is the most effective way to determine the data type of a value associated with a key in an interface?

Tips for troubleshooting TypeScript integration tests within Pycharm

ESLint and Prettier are butting heads when trying to run their commands consecutively

Tips for eliminating white frames or borders on the Mapbox canvas map

Discovering the title of a page in layout using Nextjs 13

Set certain properties within the nested object to be optional

Divide a list Observable into two parts

Only pass props to `Image` if they have a defined value

The system is unable to locate a compatible object with the identifier '[object Object]' of type 'object'. NgFor is limited to binding with iterables like Arrays, not JSON data

Encountering unspecified values when subscribing to a BehaviorSubject and receiving it as an Observable

Exploring Angular: How to Access HTTP Headers and Form Data from POST Request

Solving the error message "Cannot find module '@angular/router/src/utils/collection' or its corresponding type declaration"

Creating a randomly generated array within a Reactjs application

What is the best way to split a single object into two separate objects based on a specific value within the object using lodash?

Modify the height of React Cards without implementing collapse functionality

I am facing an issue with the Angular2 Modal Form where it only displays the data but does

What is the best way to inform TypeScript when my Type has been altered or narrowed down?

Set up karma-firefox-launcher for Angular version 15

Issue: Module "mongodb" could not be found when using webpack and typescript

Module 'angular2/angular2' not found