Real Custom Scalar Plugin using D3 and AperxChart without affecting existing functionaliies.

[Darshil580]

Motivation for features / changes

Actual implimentation of custom plugin based on given template for creating your own visualization using D3.js and Apexchart.js or anyother library that needed for visualization.

I want to contribute to this open-source repositry . I have created custom scalar visualizations plugin which can visualize two different visualization for different purpose.dd

Technical description of changes

There are not any modifications current existing functionalities but new custom plugin added which was my personal project which shows

Type of Summary

1. calculate_states : single/multi LineChart that can be ploted representing x-axis as number of steps and y-axis as any value that you want to represent for example, Loss,Accuracy,Flop Count.

   This summary is dynamic and not limited to the loss Accuracy and Flop calculation but rather it is able to visulize as many summary data user want to write as long as it is within the format.

Here are some attached Screenshots.

2. system_performance : This is multi LineChart plot with annotations on the x-axis indicatiind timestamp and different phases of the data on that timeline and y-axis shows context values such as Energy/Temprature.

   As multi-line Chart it will show different system resources mentioned by the user such as GPU, RAM, CPU power/energy consumption. This Feature is also also dynamic, it can show multiple graph and multiple lines depending upon the context and number of resouces mentioned.

Note: when you write summary for visualization there will be two differnt format for writting the summary. Choose appropriate based on your usecase.

Here are some attached Screenshots.

Screenshots of UI changes (or N/A)

There are not any changes to current UI but rather actual custom plugin is implimented screenshots of how visaluzation will look is given.

Detailed steps to verify changes work correctly (as executed by you)

Here is the link of detai information of How plugin works and what is issued

https://github.com/Darshil580/tensorboard/edit/master/tensorboard/examples/plugins/custom_plugin/README.md

Alternate designs / implementations considered (or N/A)

Built using Python as backend and Native JavaScript as frontend, no Bazel is used for the development.

Frontend :

1. index.js - Dynamoically add the HTML element to the browser.
2. style.css - Styling HTML components.
3. model.js - data binding with entity and backend server requests.
4. views.js - Contains list of Custom HTML Fragments added dynamically to browser.
5. apexchart.js - ApexChart is javascript library for creating vizualization with customization.
6. d3.v7.min.js - D3.js is also javascript library which provides highly customizatized graph and it is very powerfull. Graph generation is done throgh SVG.
7. logo - This folder contains some images for svg download and color picker button.

Backend :

1. metadata.py - Usually contains small information about plugin.
2. summary_v2.py - This file usually developed for custom summary writting without using any in-build methods provided by tensorboard for writting summary
3. plugin.py - Main logic of the plugin such as how to read and parse data to send it to designated frontend API calls.
4. setup.py - This file is an entry point to install the plugin into your current environment.
5. test.py - This file contains all the unittestcases for the plugin.py file

[google-cla]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

[groszewn]

We advise that plugins be distributed as their own pip package as opposed to attempting to include them in the main TensorBoard repository.

[Darshil580]

I will create another pull request after solving author contributor issue.