Request Elasticsearch sample with angular

Hello, Kantu Pavan Kumar,
 
Thank you for writing to us. 
 
We have prepared an Angular with Flexmonster and Elasticsearch sample project (please see "pivot-angular-elasticsearch.zip" in the attachments).
In the example, the data records are grouped by calendar weeks. 
 
The data records are grouped by using the following mapping configuration: 

mapping:{
  "timestamp":{
    "interval":"1w",
    "format":"dd/MM/yyyy"
   }
}

Please run the following commands in order to start the project (please see "pivot-angular-elasticsearch.zip" in the attachments):

npm install
npm start

After running the commands mentioned above, the project will be running on localhost:4200.

For more information about how to connect Flexmonster to Elasticsearch, please see the following tutorial.
Also, we have a detailed tutorial on how to integrate Flexmonster into an Angular application that could be of interest.

Please let us know if this helps. 
Looking forward to your reply.
 
Kind regards, 
Vera

Hello,
 
Thank you for your feedback.
 
Our team would like to explain the following:
The sample demonstrates a connection to the Elasticsearch data source. Elasticsearch is a separate data source supported by Flexmonster.
In its turn, a connection to the JSON data source requires a different configuration of the Data Source Object. To establish a connection with an API endpoint, specify the corresponding URL as a value of the dataSource.filename property:

dataSource: {
  type: "json",
  filename: "https://.." //URL to the API endpoint
}

 
We want to notice that in case JSON is used as a data source, data can not be grouped by weeks. Such grouping is only available when using Elasticsearch as a data provider.
Therefore, in case grouping by weeks is mandatory for your case, we suggest uploading your JSON data set to Elasticsearch. Please refer to Elasticsearch documentation for more information on this matter.
 
Our team hopes it works for you.
Please contact us if other questions arise.
 
Kind regards,
Illia

Hello,
 
Thank you for your feedback.
 
We suggest using CSS to disable the chosen buttons of the Toolbar.
For example, if "Open" and "Charts" buttons need to be disabled, the following CSS should be added to the page:

#fm-tab-open,
#fm-tab-charts {
  pointer-events: none;
  opacity: 0.5;
}

 
Please see an example we have prepared for you.
 
The unique identifier of each button can be retrieved using the developer tools of your browser.
 
Please let us know if it works for your case.
Do not hesitate to contact us in case other questions arise.
 
Best regards,
Illia

Hello,
 
Thank you for your feedback.
 
We have prepared an Angular example. It demonstrates adding/removing the corresponding styles after the application is launched, and a Flexmonster instance is created.
 
We want to draw your attention to the app.component.ts file. It contains functions responsible for managing styles:

disableButtons() {
  let openButton = document.getElementById("fm-tab-open"),
    chartsButton = document.getElementById("fm-tab-charts");
  openButton.style.pointerEvents = "none";
  openButton.style.opacity = "0.5";
  chartsButton.style.pointerEvents = "none";
  chartsButton.style.opacity = "0.5";
}

enableButtons() {
  let openButton = document.getElementById("fm-tab-open"),
    chartsButton = document.getElementById("fm-tab-charts");
  openButton.style.pointerEvents = "auto";
  openButton.style.opacity = "1";
  chartsButton.style.pointerEvents = "auto";
  chartsButton.style.opacity = "1";
}

 
The sample itself can be found in attachments. Please run the following set of commands to install all the required dependencies and launch the project:

npm install
ng serve

 
Our team hopes it works for you.
Please contact us in case other questions arise.
 
Kind regards,
Illia