Question: How to get typesafe injection
Question: Why should I use inject decorator?
issue: deprecate inject
and Provider
Problem Unit Testing a Parent Component whose Child Inject a Store
hexo 插入图片
vscode 内无法预览代码的图片,通过插件 Markdown Preview Enhanced
来解决,首先安装此插件,然后 ctrl+shift+P
输入
1 | Markdown Preview Enhanced: Extend Parser |
调出插件的 parse.js
文件,修改其中的 onWillParseMarkdown
方法:
1 | module.exports = { |
安斯库姆四重奏
安斯库姆四重奏(Anscombe’s quartet)是四组基本的统计特性一致的数据,但由它们绘制出的图表则截然不同。每一组数据都包括了11个 ($x$,$y$) 点。这四组数据由统计学家弗朗西斯·安斯库姆(Francis Anscombe)于1973年构造,他的目的是用来说明在分析数据前先绘制图表的重要性,以及离群值对统计的影响之大。
这四组数据的共同统计特性如下:
性质 | 数值 |
---|---|
x的平均数 | 9 |
x的方差 | 11 |
y的平均数 | 7.50(精确到小数点后两位) |
y的方差 | 4.122或4.127(精确到小数点后三位) |
x与y之间的相关系数 | 0.816(精确到小数点后三位) |
线性回归线 | $y=3.00+0.500x$(分别精确到小数点后两位和三位) |
SQLAlchemy & Pandas
做数据分析如果用到了数据库作为数据源,pandas 提供了 read_sql
函数,那么如果数据库使用了 SQLAlchemy
ORM 该怎么利用这个函数呢?
官方文档上说明可以使用,只是说的比较笼统,具体代码如下:
1 | df = pd.read_sql(query.statement, query.session.bind) |
如果使用的是 Flask-SQLAlchemy
则可以为:
1 | df = pd.read_sql(User.query.filter().statement, db.session.bind) |
Flask-SQLAlchemy 调试
在使用 Flask-SQLAlchemy 时,如果想调试相关代码,一般和调试 Flask 调试一样,运行
1 | flask shell |
进入 Shell 环境进行。
注意,原生运行此命令,Shell 环境为默认的 Python 环境,没有 IPython 提供的代码高亮和代码提示。
此时安装 flask-shell-ipython
插件可以解决此问题。
如果不想使用上述插件,我们可以创造一个应用上下文环境,即控制台运行 ipython
,进入 IPython 环境,在其中运行代码:
1 | from manage import app, db |
这样既创造了一个应用上下文环境。下面我们就可以正常完成数据库的增删查改操作。
如果使用 PyCharm 编辑器,其提供的 Python Console
提供了查看当前变量值等功能更加的方便,同理可以在其中运行上述代码。
每次运行上述代码嫌麻烦,PyCharm 提供了 Starting script
功能,具体操作如下:
Setting > Build, Execution, Deployment > Console > Python Console > Starting script
然后将上述代码,添加到其中,每次运行 Python Console
就能自动加载上述代码。
JavaScript 数据可视化
D3js
前端可视化领域当之无愧的 No.1,提供的 API 相对基础,相对灵活度最好,适合完成定制化有较高要求的图形。
网上的参考资料很多,摘录两个:
封装 D3js,以提供更易用的 API 的库也很多:
期中 Recharts 是基于 React 的组合式图表,有官方中文文档。
设计比较简约,可满足一般数据可视化需要。
Chart.js
官方介绍:
为设计和开发人员准备的简单、灵活的 JavaScript 图表工具
相比其他可视化库,其使用可能最为简单、轻量。目前中文文档翻译完成度较低。
Echarts
基于 React 封装库有 echarts-for-react,其只是体统了一个简单的封装组件,使用中仍按照 Echarts 的 API 来完成数据可视化。
基于 Vue2.x 封装的有v-charts,其封装度更高。
AntV
蚂蚁金服开源的数据可视化解决方案,包含:
- G2: 一般的数据可视化
- G6: 关系数据可视化
- F2: 专注移动端的数据可视化解决方案
一般我们用到最多的是 AntV/G2
,相比 Echarts 算是后起之秀,官方介绍为:
G2 是一套基于可视化编码的图形语法,以数据驱动,具有高度的易用性和扩展性,用户无需关注各种繁琐的实现细节,一条语句即可构建出各种各样的可交互的统计图表。
与 Echarts 相比,因为其封装了一些细节,使用上可能相对简单,但是没有 Echarts 那么高的可定制度,相对图形做细微定制化调整,按照官方的 API 可能让人摸不着头脑。而自 Echarts V4 版本,也加入了 数据集(dataset)
等功能,减少了代码繁琐度,相比来说可能 Echarts 更好用一些。就系统化解决方案来说,因AntV
包含各端以及覆盖 React
、Vue
、Angular
的官方封装,会更胜一筹。就主题配色来啊,个人感觉 AntV
提供的默认主题更好看一点,若你是颜控,不妨试试 AntV/G2
。
G2
和 G6
有基于其的 React 封装库:
- BizCharts: 一个基于 G2 封装的 React 图表库,具有 G2、React 的全部优点,可以让用户以组件的形式组合出无数种图表;并且集成了大量的统计工具,支持多种坐标系绘制,交互定制,动画定制以及图形定制等等。
- BizGoblin: 一个基于 F2 封装的 React 图表库,具有 F2、React 的全部优点,可以让用户以组件的形式组合出无数种移动端图表。
不过如果不研究 G2
文档,直接上手 BizCharts
是个大坑……
Highcharts
另一个比较流行的数据可视化框架,有中文文档,网上和 Echarts 对比的文章较多,可自行查阅。有些方面比 Echarts 更强大易用。不过其商用授权费用大部分国内公司会望而却步,单个开发者授权为7900元
。
Webstorm 设置
若想启用 Prettier
格式化代码,需要自行安装 Prettier
:
1 | yarn add --dev prettier |
这样编辑器会自动选择 Prettier
路径,完成配置。格式化快捷键 Ctrl+Shift+Alt+P
。
注意,使用 Prettier
格式化代码与内置的格式化引擎(快捷键为 Ctrl+Shift+L
)存在差异,而且 WebStorm 编辑器无法像 VSCode 那样在不同的语言环境下选择格式化引擎,即无法达到在编辑 JavaScript 代码时按 Ctrl+Shift+L
使用的是 Prettier
来个格式化代码的效果。
此时若手误按 Ctrl+Shift+L
快捷键,格式化的代码和原来的不符,给 Git 版本控制带来麻烦。
为解决上述问题,我们通过 WebStorm 提供的 Watch Filers
来迂回解决,具体操作为:打开 Setting
,选择 Tools>File Watchers
,点击 +
,选择 Prettier
,用默认设置点及 Ok
保存即可。
这样,我们在保存代码是时候,能自动使用 Prettier
来格式化代码,不用再考虑快捷键格式化代码的问题。
tslint 拾遗
禁止某行的 tslint 检查(Comment flags in source code):
1 | someCode(); // tslint:disable-line |
typescript 配置小计
tsconfig.json 配置
下面对 tsconfig.json
配置文件中常用配置做相关说明
若想使用下面语法导入 React
1 | import React, { Component } from 'react'; |
而不是使用
1 | import * as React from 'react'; |
需要在 tsconfig.json
配置文件中添加:
1 | { |
tslint.json 配置
允许成员函数不加 public
说明:
1 | { |