Star 历史图形化展示

[521xueweihan]

• [ ] 项目详情页 Star 趋势展示
• [ ] 数据增长的详细数据
• [ ] Star 历史趋势图插件

参考：https://github.com/unsplash/react-trend

期望效果：

[Maidang1]

没有看到具体的截图,可以加一个截图 如果和这个类似的话,这里面是通过 clip-path 自己计算的趋势 然后画出来 https://hirok.io/projects

https://github.com/privatenumber/hirok.io/blob/master/src/components/CssChart.vue#L9

[521xueweihan]

@Maidang1 感谢提示，我之前找到一个 sample trend svg 的库：

https://github.com/unsplash/react-trend

但它年久失修，而且我忘了之前为啥在它和 echart 间选择了 echart，貌似是 div 位置问题。

我期望的图标效果如下：

如果感谢兴趣的话，可以参与一起搞。

[yxb94616]

@521xueweihan 如果只是需要实现 issue 截图里的期望效果，我看这块 github 是用的 svg 实现的，其中 polyline 如下图，可以 copy 这个 svg，然后构建对应的 points 数据就行，颜色尺寸都可以改

<polyline transform="translate(0, 28) scale(1,-1)" points="0,19 3,1 6,4 9,12 12,1 15,3 18,5 21,10 24,1 27,1 30,4 33,2 36,1 39,1 42,3 45,1 48,3 51,3 54,1 57,3 60,2 63,1 66,1 69,1 72,2 75,1 78,1 81,1 84,1 87,1 90,2 93,1 96,1 99,1 102,1 105,1 108,1 111,1 114,1 117,1 120,1 123,1 126,1 129,1 132,1 135,1 138,1 141,1 144,1 147,1 150,1 153,1 " fill="transparent" stroke="#8cc665" stroke-width="2"> </polyline>

[adoin]

试一下这个 应该可以。。。

// 模拟30天的stars数(有可能负数)
//先模拟每天增加的stars数
const increaseInDays: number[] = Array.from(
  { length: 30 },
  () => Math.floor(Math.random() * 100) - 20,
);
//累加获得每天的总stars数
// 假设30天前有666个starts
const starsHistory: number[] = increaseInDays.reduce(
  (acc, cur) => [...acc, acc[acc.length - 1] + cur],
  [666],
);
const max = Math.max(...starsHistory);
// 设置个常量缩放比例，避免负数超出以及贴边
const scale = 0.8;
//获得的 svg渲染函数
// 设置宽度为160，高度为20， 一共30个点，每个点的间距为3
const renderTrend = () => (
  <svg width="160" height="20">
    <polyline
      transform={`scale(${scale}, ${scale})`}
      points={starsHistory
        .map((stars, index) => {
          const x = index * 3;
          const y = 20 - (stars / max) * 20;
          return `${x},${y}`;
        })
        .join(' ')}
      fill="transparent"
      stroke="#8cc665"
      stroke-width="2"
    ></polyline>
  </svg>
);

@521xueweihan