react中使用构建缓存_如何在React中构建热图

react中使用构建缓存

Heat maps are a great way of visualizing correlations among two data sets.  With colors and gradients, it is possible to see patterns in the data almost instantly.

热图是可视化两个数据集之间相关性的一种好方法。 使用颜色和渐变，可以几乎立即看到数据中的图案。

I went searching for a heat map implementation in npm, but was unable to find one that I liked, so I wrote my own. It is still a work in progress, but does provide basic functionality.

我在npm中搜索热图实现，但找不到我喜欢的实现，因此我编写了自己的 。 这项工作仍在进行中，但确实提供了基本功能。

There are actually two parts to the implementation: jsheatmap takes headings and row data to produce a JSON object where the raw input is scaled from 0.0 to 1.0 and then RGB colors are mapped to those scaled values.  I will confess that most of this was already worked out by Andrew Noske, who provided a partial C++ implementation in his blog.  Transliterating C++ to TypeScript was relatively easy.

实现实际上包括两部分： jsheatmap使用标题和行数据来生成JSON对象，其中原始输入从0.0缩放到1.0，然后将RGB颜色映射到这些缩放值。 我要承认，其中大多数已经由Andrew Noske解决了，他在他的博客中提供了部分C ++实现 。 将C ++音译为TypeScript相对容易。

The second part is an HTML presentation of the JSON data returned by jsheatmap. This would typically be the responsibility of the user of jsheatmap module, but I did build a general-purpose React application that demonstrates how HTML table cells can be used as a heat map representation.

第二部分是jsheatmap返回的JSON数据HTML表示。 这通常是jsheatmap模块用户的责任，但是我确实构建了一个通用的React应用程序 ，该应用程序演示了如何将HTML表单元格用作热图表示形式。

基础 (The basics)

First, install jsheatmap:

首先，安装jsheatmap：

npm i -S jsheatmap

npm i -S jsheatmap

As mentioned, jsheatmap was written in TypeScript, but npm will install the generated JavaScript version of the TypeScript program, which is what your application will use.

如前所述，jsheatmap是用TypeScript编写的，但是npm将安装TypeScript程序的生成JavaScript版本，这是您的应用程序将使用的版本。

Next, import the jsheatmap components.  

接下来，导入jsheatmap组件。

import HeatMap, { Style } from "jsheatmap"

import HeatMap, { Style } from "jsheatmap"

The Style component is not strictly required.  As of this writing, there are only two Styles: SIMPLE and FANCY.  FANCY  is the default, which uses a 5-color gradient for the heat map RGB data.  SIMPLE uses a three-color gradient, which you might prefer for smaller data sets. The style is passed to the getData() method, as will be shown later.

Style组件不是严格要求的。 在撰写本文时，只有两种样式：SIMPLE和FANCY。 FANCY是默认设置，它对热图RGB数据使用5色渐变。 SIMPLE使用三色渐变，对于较小的数据集，您可能更喜欢这种渐变。 样式将传递到getData()方法，如稍后所示。

Instantiate a HeatMap with headings (column names) and row data:const heatMap = new HeatMap(headings, rows)

使用标题(列名)和行数据实例化const heatMap = new HeatMap(headings, rows) ： const heatMap = new HeatMap(headings, rows)

where headings is an array of strings (column headings) and rows is an array of labels and cell data.  For example:

其中标题是字符串(列标题)的数组，行是标签和单元格数据的数组。 例如：

// Days of rain in summer summer months, by year
const headings = ["June", "July", "August", "September"]  // the months
const rows = [["2015", [9, 5, 6, 8]],   // the years and rainy days by month
   ["2016", [7, 5, 10, 7]],
   ["2017", [7, 4, 3, 9]],
   ["2018", [10, 5, 6, 8]],
   ["2019", [8, 9, 3, 1]],]

转换为RGB (Converting to RGB)

Now is time to get the heat map data:

现在是时候获取热图数据了：

// const data = heatMap.getData({ style: Style.SIMPLE });
const data = heatMap.getData();

The default style is FANCY (five color gradient) whereas SIMPLE would use a three-color gradient for the RGB mapping.

默认样式为FANCY(五种颜色渐变)，而SIMPLE将为RGB映射使用三色渐变。

Cell values are then scaled, relative to each other, with scale values determined by the high and low values of the input. Once all the inputs have been scaled from 0.0 to 1.0, they can be mapped to RGB color values. All of this data is returned by getData():

然后，将单元格值相对于彼此进行缩放，缩放值由输入的高值和低值确定。 一旦所有输入都从0.0缩放到1.0，就可以将它们映射为RGB颜色值。 所有这些数据由getData()返回：

{
  "headings": [
    "Jun",
    "Jul",
    "Aug",
    "Sep"
  ],
  "high": 9,
  "low": 4,
  "rows": [
    {
      "label": "2015",
      "cells": {
        "values": [
          7,
          5,
          6,
          8
        ],
        "colors": [
          {
            "red": 0.6249999999999998,
            "green": 1,
            "blue": 0
          },
          {
            "red": 0,
            "green": 0.588235294117647,
            "blue": 1
          },
          {
            "red": 0,
            "green": 1,
            "blue": 0.625
          },
          {
            "red": 1,
            "green": 0.588235294117647,
            "blue": 0
          }
        ],
        "scales": [
          0.6,
          0.2,
          0.4,
          0.8
        ]
      }
    },
    {
      "label": "2016",
      "cells": {
        "values": [
          7,
          5,
          5,
          7
        ],
        "colors": [
          {
            "red": 0.6249999999999998,
            "green": 1,
            "blue": 0
          },
          {
            "red": 0,
            "green": 0.588235294117647,
            "blue": 1
          },
          {
            "red": 0,
            "green": 0.588235294117647,
            "blue": 1
          },
          {
            "red": 0.6249999999999998,
            "green": 1,
            "blue": 0
          }
        ],
        "scales": [
          0.6,
          0.2,
          0.2,
          0.6
        ]
      }
    },
    {
      "label": "2017",
      "cells": {
        "values": [
          7,
          4,
          5,
          9
        ],
        "colors": [
          {
            "red": 0.6249999999999998,
            "green": 1,
            "blue": 0
          },
          {
            "red": 0,
            "green": 0,
            "blue": 1
          },
          {
            "red": 0,
            "green": 0.588235294117647,
            "blue": 1
          },
          {
            "red": 1,
            "green": 0,
            "blue": 0
          }
        ],
        "scales": [
          0.6,
          0,
          0.2,
          1
        ]
      }
    },
    {
      "label": "2018",
      "cells": {
        "values": [
          6,
          5,
          7,
          8
        ],
        "colors": [
          {
            "red": 0,
            "green": 1,
            "blue": 0.625
          },
          {
            "red": 0,
            "green": 0.588235294117647,
            "blue": 1
          },
          {
            "red": 0.6249999999999998,
            "green": 1,
            "blue": 0
          },
          {
            "red": 1,
            "green": 0.588235294117647,
            "blue": 0
          }
        ],
        "scales": [
          0.4,
          0.2,
          0.6,
          0.8
        ]
      }
    },
    {
      "label": "2019",
      "cells": {
        "values": [
          8,
          6,
          6,
          8
        ],
        "colors": [
          {
            "red": 1,
            "green": 0.588235294117647,
            "blue": 0
          },
          {
            "red": 0,
            "green": 1,
            "blue": 0.625
          },
          {
            "red": 0,
            "green": 1,
            "blue": 0.625
          },
          {
            "red": 1,
            "green": 0.588235294117647,
            "blue": 0
          }
        ],
        "scales": [
          0.8,
          0.4,
          0.4,
          0.8
        ]
      }
    }
  ]
}

For the demonstration application, I use React to generate a table with each <td> element's background styled as follows:

对于演示应用程序 ，我使用React生成一个表，每个表的背景样式如下：

const background = (rgb) => {	
    return `rgb(${rgb.red * 100}%, ${rgb.green * 100}%, ${rgb.blue * 100}%)`;
}

Where rgb() is the built-in CSS function for RGB colors, and the passed-in rgb parameter comes from the cell colors of the row generated by getData().  To run the implementation, first clone the repository:

其中rgb()是RGB颜色的内置CSS函数，而传入的rgb参数来自getData()生成的行的单元格颜色。 要运行实现，请首先克隆存储库：

git clone https://github.com/JeffML/sternomap.git

git clone https://github.com/JeffML/sternomap.git

then go to the sternomap folder and run:

然后转到sternomap文件夹并运行：

npm install

npm install

finally:

最后：

npm run start

npm run start

As an aside: the application was originally generated using Create React App, and the README.md file explains all that in detail.  

顺便说一句 ：该应用程序最初是使用Create React App生成的， README.md文件详细解释了所有这些内容。

输出 (The output)

Once the script has finished, it will load a page in your browser (I use Chrome). Here's a snapshot:

脚本完成后，它将在浏览器中加载页面(我使用Chrome)。 这是快照：

This shows rainy days per month  in each cell, by year. From this you can see that the driest months are July and August, with the wettest being September. The number inside each cell is the scaled value of the raw input (rainy days), so the least rainy days were in July of 2017, and the most in September of that year.

这显示了每个单元格每个月每月的雨天。 从中可以看到最干旱的月份是七月和八月，最潮湿的月份是九月。 每个单元格中的数字是原始输入的换算值(雨天)，因此雨天最少的是2017年7月，雨天最多的是该年9月。

彩虹的颜色 (A rainbow of colors)

I can generate a data set where the value of each cell is the sum of it's x + y coordinates.  For row labels, I use the npm module casual to create them.

我可以生成一个数据集，其中每个单元格的值是其x + y坐标的总和。 对于行标签，我使用npm模块Casual来创建它们。

总结 (The wrap up)

I have some plans to use this heat map implementation in other projects, which I am sure will require changes to the API, but the basics should remain the same.  If you decide to try this and find it useful, let me know.

我有一些计划在其他项目中使用此热图实现，我敢肯定，这需要更改API，但基本知识应保持不变。 如果您决定尝试此方法并发现它有用，请告诉我。

翻译自: https://www.freecodecamp.org/news/a-heat-map-implementation-in-typescript/

react中使用构建缓存