The appearance of DC charts can vary when constructing an Angular application in production mode

Currently, I am in the process of developing an application that utilizes d3, dc, and crossfilter for rendering charts.

  • crossfilter2: v1.4.6
  • d3: v3.5.17
  • dc: v2.2.1

I have been working on adjusting the Y scale to display only whole numbers without decimals.

When testing my application in development mode using 'ng serve', everything works as expected:

https://i.sstatic.net/iiV5e.png

However, when I build the app in production mode, the Y scale does not behave the same way:

https://i.sstatic.net/o74Ge.png

The difference seems to stem from whether I use 'ng serve' or 'ng build --prod.'

The snippet of code responsible for setting the ticks is:


/* grpProductType is a crossfilter.Group*/
const maxY = d3.max(d3.values(grpProductType))(1)[0]?.value;

if (maxY < 7) {

    /* dcStepsByProductType is a dc.BarChart */
    dcStepsByProductType.yAxis().ticks(maxY);

}

After some investigation, I found that the issue is related to a specific property in the angular.json file under:

projects => [app name] => architect => build => configurations => production => optimization => scripts

If this property is set to true, the error occurs, but if it's false, the app runs smoothly.

Logs when the value is true (error): https://i.sstatic.net/u4NG5.png

Logs when the value is false (working correctly): https://i.sstatic.net/uMD4a.png

The discrepancy appears to be related to the return value from invoking the 'all' function.

My question now is, what could potentially be causing this discrepancy?

angulartypescriptd3.jsdc.jscrossfilter

Answer №1

Your code and debug output both indicate

d3.values(grpProductType)

However, it appears that grpProductType is actually a crossfilter group object, resulting in an array of the object's methods:

https://i.sstatic.net/N3k26.png

Subsequently, your code proceeds to calculate the maximum of these functions, then calls this function with the parameter 1, retrieves the first element of the outcome array, and reads its field value if present:

const maxY = d3.max(d3.values(grpProductType))(1)[0]?.value;

This appears to be automated software development process, as the purpose behind it remains quite mysterious to me. It may work during development due to the highest function being .top() (presumably by name?), but during optimized production mode, the functions have shorter, nonsensical names which results in calling a different function.

Given that it's a crossfilter group object, the best approach would be to directly utilize .all() to fetch the bins. This method will provide an array of {key,value} objects; hence, a more efficient way to compute maxY would be:

const maxY = d3.max(grpProductType.all(), d => d.value);

Alternatively, if you prefer utilizing .top():

const maxY = grpProductType.top(1)[0].value;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize string variables within TypeScript's enumeration feature

Can string variables be used in enums in TypeScript? Strings can be used in enum like so: enum AllDirections { TOP = 'top', BOTTOM = 'bottom', LEFT = 'left', RIGHT = 'right', } However, trying to use variab ...

typescriptenums

NestJS does not recognize TypeORM .env configuration in production build

Currently, I am developing a NestJS application that interacts with a postgres database using TypeORM. During the development phase (npm run start:debug), everything functions perfectly. However, when I proceed to build the application with npm run build a ...

typescriptenvironment-variablesnestjstypeorm

Despite subscribing, the Ngxs @Select decorator is still returning undefined values

I am attempting to access and read the labels stored in the state file. Displayed below is my state file: export class LabelStateModel { labels: LabelConfig = {}; } @State<LabelStateModel>({ name: 'labels', defaults: { labels: { ...

angularngxs

When the local server and SPA are running on different ports, utilizing an authentication cookie can help bridge the

I currently have a nest.js webserver running on localhost:3000, with an angular frontend served to localhost:4200 (using the dev server). These ports are set as defaults. My authentication process involves sending an access-token in a cookie to the front ...

node.jsangularexpressnestjs

Error: useRef in TypeScript - cannot be assigned to LegacyRef<HTMLDivElement> type

Struggling to implement useRef in TypeScript and facing challenges. When using my RefObject, I need to access its property current like so: node.current. I've experimented with the following approaches: const node: RefObject<HTMLElement> = us ...

reactjstypescripttsx

What might be preventing combineLatest from executing?

Currently, I am attempting to run a block of code utilizing the combineLatest function. Within my translation library, there exists an RXJS Observable that is returned. Imported as individual functions are combineLatest, map, and tap. combineLatest(this. ...

javascriptangularrxjsreactivex

What is the method for generating a tree structure with JSON data in d3.v4, but without using stratify()?

I am currently in the process of updating some d3 code from version 3 to version 4. The code involves a tree diagram that uses JSON data. While browsing through the d3.v4 examples, I noticed that they demonstrate how to convert tabular data (e.g. flare.csv ...

jsontreed3.js

Using multiple pipes in Angular 4 with Typescript to manipulate values

I've developed a custom pipe called 'filterBy' and I want to implement it in my application. Most of it is functioning well, but I am facing challenges when trying to use this pipe for multiple properties. Allow me to elaborate on what I am ...

angulartypescriptfilterpipecomponents

Issue encountered when attempting to load asynchronous data into a form and subsequently sending it for submission

In my application, there is a component known as redirectComponent which is triggered and initialized by other components in the application when they call the route where it's located (http://localhost:4200/redirect/). Upon being called, redirectCom ...

angulartypescriptdata-bindingasync-await

Discover the latest DOM elements using Webdriverio 5

Currently, I am developing a REact based CMS application that features a form with multiple carousels. I am encountering an issue where the webdriverio implementation is unable to locate an element, even though the same xpath works fine when tested manua ...

typescriptseleniumselenium-webdriverwebdriver-io

Ensure that each component in Angular2 includes a separate JavaScript file

Every time I include a JavaScript file in my index.html and use a function, it only works the first time. When I refresh the page, it stops working. I am looking for a solution to include a JavaScript file for each component to prevent this issue from oc ...

javascripttypescriptangular

How to display specific JSON objects that meet particular criteria in HTML cards using Ionic and Angular?

As a beginner in Ionic/Angular, I am attempting to fetch data from a JSON file and display it using cards in the HTML. The JSON contains numerous objects that are either marked as "deTurno == true" or "deTurno == false". Here is what I have so far: publi ...

javascriptjsonangulartypescriptionic-framework

Receiving a reply from the axios function

Whenever I try to call the lookUpItem function from ItemSearch.vue, I always get an undefined response. Code snippet from ItemSearch.vue: <script setup lang="ts"> import { lookUpItem } from '../systemApi' async fu ...

javascripttypescriptvuejs3

Angular's isteven-multi-select Component: A Versatile Selection Tool

Is it possible to utilize isteven-multi-select with ng-model? My goal is to have certain items appear as chosen when the page loads using the isteven-multi-select module. I've tried using ng-model in the HTML page to populate the isteven-multi-select ...

javascriptangular

Angular seems to be experiencing issues with maintaining context when executing a function reference for a base class method

Imagine we have CtrlOne that extends CtrlTwo, with a componentOne instantiated in the template of CtrlOne. Here is some code to illustrate the issue: class CtrlOne extends CtrlTwo { constructor() { super(); } } class CtrlTwo { sayMyName(name: st ...

javascriptangularjstypescript

Tips for preloading icon font in Angular server-side rendering (SSR)

Is it possible to preload icons and fonts before the HTML content is rendered? I have been using a preload strategy to try and achieve this. index.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

htmlangularpreload

WebStorm is not auto-completing the Emotion Styled Components

While using @emotion/styled in WebStorm, I have noticed that there is no Intellisense for autocomplete within my style object. However, Typescript does seem to be checking to some extent: const StepTimer = styled.button({ borderRadius: 50, height: &ap ...

typescriptwebstormemotion

JavaScript/Typescript is throwing an error because it is unable to access the property 'username' of an undefined object

In my project, I am attempting to compile a list of Profile objects and then extract specific elements from each object in the list. To accomplish this, I have defined a public interface named Profile, imported it into my component, and instantiated a new ...

javascriptangulartypescript

"Encountering a 400 bad request error when making a Graphql POST

Seeking assistance with my graphql code. I have included the service and component files below. I am currently new to graphql and not utilizing the apollo client; instead, I am attaching a query on top of the HTTP POST call to send requests to the graphql ...

angulargraphql

Setting up the environment for Angular 7 within a TFS build pipeline

I've been attempting to customize the environment in my tfs build pipeline, but it keeps defaulting to the dev environment. Oddly enough, the 'ng serve' command is working perfectly fine. Below are the version details of my application: An ...

node.jsangulartypescriptecmascript-6single-page-application