Explore all Chart open source software, libraries, packages, source code, cloud functions and APIs.

Popular New Releases in Chart

Chart.js

v3.7.1

echarts

5.3.2

plotly.js

v2.11.1

charts

Frappe Charts v1.6.1

react-flow

Release 10.1.2

Popular Libraries in Chart

Chart.js

by chartjs doticonjavascriptdoticon

star image 56282 doticonMIT

Simple HTML5 Charts using the <canvas> tag

echarts

by apache doticontypescriptdoticon

star image 50600 doticonApache-2.0

Apache ECharts is a powerful, interactive charting and data visualization library for browser

MPAndroidChart

by PhilJay doticonjavadoticon

star image 33541 doticonNOASSERTION

A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, panning and animations.

recharts

by recharts doticontypescriptdoticon

star image 18061 doticonMIT

Redefined chart library built with React and D3

charts

by helm doticongodoticon

star image 15218 doticonApache-2.0

⚠️(OBSOLETE) Curated applications for Kubernetes

plotly.js

by plotly doticonjavascriptdoticon

star image 14589 doticonMIT

Open-source JavaScript charting library behind Plotly and Dash

charts

by frappe doticonjavascriptdoticon

star image 13951 doticonMIT

Simple, responsive, modern SVG Charts with zero dependencies

chartist-js

by gionkunz doticonjavascriptdoticon

star image 12783 doticonNOASSERTION

Simple responsive charts

pyecharts

by pyecharts doticonpythondoticon

star image 11137 doticonMIT

🎨 Python Echarts Plotting Library

Trending New libraries in Chart

imove

by ykfe doticontypescriptdoticon

star image 2765 doticonMIT

Move your mouse, generate code from flow chart

flowchart-fun

by tone-row doticontypescriptdoticon

star image 2453 doticonMIT

Easily generate flowcharts and diagrams from text ⿻

LogicFlow

by didi doticontypescriptdoticon

star image 2251 doticonApache-2.0

A front-end framework for process visualization.

diagram-maker

by awslabs doticontypescriptdoticon

star image 2133 doticonApache-2.0

A library to display an interactive editor for any graph-like data.

ant-design-charts

by ant-design doticonjavascriptdoticon

star image 1089 doticonMIT

A React Chart Library

UnusualVolumeDetector

by SamPom100 doticonhtmldoticon

star image 955 doticonMIT

Gets the last 5 months of volume history for every ticker, and alerts you when a stock's volume exceeds 10 standard deviations from the mean within the last 3 days

SwiftUICharts

by mecid doticonswiftdoticon

star image 910 doticonMIT

A simple line and bar charting library that supports accessibility written using SwiftUI.

reaflow

by reaviz doticontypescriptdoticon

star image 626 doticonApache-2.0

🕸 React library for building workflow editors, flow charts and diagrams

SwiftUICharts

by willdale doticonswiftdoticon

star image 454 doticonMIT

A charts / plotting library for SwiftUI. Works on macOS, iOS, watchOS, and tvOS and has accessibility features built in.

Top Authors in Chart

1

fusioncharts

15 Libraries

star icon601

2

chartjs

10 Libraries

star icon57636

3

syncfusion

9 Libraries

star icon463

4

apache

9 Libraries

star icon51591

5

HanSolo

8 Libraries

star icon436

6

AnyChart

8 Libraries

star icon2035

7

highcharts

8 Libraries

star icon12246

8

microsoft

7 Libraries

star icon274

9

flexmonster

6 Libraries

star icon37

10

image-charts

6 Libraries

star icon67

1

15 Libraries

star icon601

2

10 Libraries

star icon57636

3

9 Libraries

star icon463

4

9 Libraries

star icon51591

5

8 Libraries

star icon436

6

8 Libraries

star icon2035

7

8 Libraries

star icon12246

8

7 Libraries

star icon274

9

6 Libraries

star icon37

10

6 Libraries

star icon67

Trending Kits in Chart

A nested pie chart is a type of pie chart that uses many layers of nested rings to visualize and analyze data. It shows the relationship between parts of a whole or the composition of a particular group. The innermost circle represents the total sum of the data and each subsequent circle. It shows the proportion of the whole that each part contributes. For example, a nested pie chart can show the proportion of different types of fruit in a basket. It can also tell the proportion of students in a school by grade level. 


We can visualize the different types of data with a nested pie chart are: 

Numerical Data:  

  • Population by Age Group 
  • Expenditure by Category 
  • Budget Allocation by Department 
  • Annual Revenue by Region 
  • Cost of Living by City 

Categorical Data:  

  • Brand Preferences by Gender 
  • Voter Turnout by Political Party 
  • Employee Satisfaction by Role 
  • Education Level by Country 
  • Job Satisfaction by Industry 


Nested pie charts display hierarchical relationships between data in a visual form. The chart contains nested circles giving a circular statistical plot. It's where we can represent the plot from a level in the hierarchy. A different color represents each hierarchy level; the innermost circle is the highest. 


Nested pie charts can create bar, pie, and line charts. The bar chart uses a hierarchical structure to compare many data points. It displays the relative proportions of each data point within the hierarchy. The line chart displays trends over time. 

  • X-Axis: The x-axis measures the categories, or groups, of data in a nested pie chart. It runs along the bottom of the chart and displays the labels for each data group. 
  • Y-Axis: The y-axis measures the size of each data group in a nested pie chart. It runs from the left side of the chart and displays the numerical values for each data group. 
  • Scale Axis: The scale axis helps measure each data group's relative size in a nested pie chart. It runs along the top or right side of the chart and displays the numerical values for each data group. Remembering that the scale axis should be consistent across all charts is important. 


We can use different types of labels with a nested pie chart. 

  • Title Label: The title label identifies the chart and provides context for the data. It should explain the chart and give the reader an understanding of the data. 
  • Data Labels: Data labels identify the individual sections of the pie chart. These labels can be numerical values, percentages, or even words. The words that describe the values. 
  • Legend Labels: The legend labels identify the pie chart's different sections. These labels should explain what each section of the chart represents. They can be color-coded to identify the sections further. 

Different types of layout options are available for a nested pie chart:

Stacked Layout: 

The stacked layout shows the segments of the outer pie chart stacked on top. It offers a representation of the relative subcategory sizes within each main category. 

Grouped Layout: 

The grouped layout for a nested pie chart shows the segments of the outer pie chart grouped. It is useful for identifying the relationships between the subcategories as groupings. It makes comparing the relative subcategory sizes within each main category easier. 

Nested Layout: 

The nested layout for a nested pie chart shows the segments of the outer pie chart nested within each other. The nested segments make it easier to identify the size of each main category relative to the others. It is useful for identifying the relationships between the main and the subcategories. 

For creating a nested pie chart: 

Choose the right data type: 

Gather the data needed to create the nested pie chart. This data should include the categories of information. It should also include the number of items in each category and the percentages of each category. 

Design the chart correctly: 

Once we gather the data and use a graphing program or software to create the chart, we set up the chart correctly, ensuring we nest the categories and label the data properly. 

Add labels and axes: 

Finally, add labels and axes to the chart to make it easier to understand. Be sure to label the category names, the numbers, and the percentages. Also, be sure to add a legend to the chart to explain the meanings of the colors. 

We can use a nested pie chart to visualize data by following some points: 

Determine the data you want to visualize and the most appropriate chart type. Nested pie charts are great for comparing categories within a whole. So, consider your research question when selecting the chart type. Choose a layout that conveys the data. Avoid using too many pies in one chart, as it can be hard to read. Instead, consider using many charts to differentiate the categories better. Add labels to each pie chart and the data points to identify the category or point in the chart. Make sure to add a title, legend, and other helpful information to the chart to make it easier to interpret. Use colors to differentiate the categories within the chart. Use a consistent color scheme throughout the chart and darker colors for categories. Consider adding a call-out box. It explains the differences between the categories within the chart. This will make it easier for viewers to understand the data. 


A nested pie chart visualizes data. It allows the viewer to compare proportions and relationships. By nesting the pie charts, the viewer can identify if one variable is more or less important than another. This makes it quick to identify correlations and trends in the data. Additionally, the visual nature of the chart makes it easier to explain complex data sets.




Fig1: Preview of the Code.



Fig2: Preview of the output.

Code


In this solution, we are creating a nested pie chart using matplotlib.

Instructions

Follow the steps carefully to get the output easily.

  1. Install Jupyter Notebook on your computer.
  2. Open terminal and install the required libraries with following commands.
  3. Install numpy - pip install numpy.
  4. Install pandas - pip install pandas.
  5. Install matplotlib - pip install matplotlib.
  6. Copy the code using the "Copy" button above and paste it into your IDE's Python file.
  7. Remove the text from line number 17 to 28.
  8. Run the file.


I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.


I found this code snippet by searching for "Create a nested pie chart using matplotlib python" in kandi. You can try any such use case!

Dependent Libraries


If you do not have matplotlib or numpy that is required to run this code, you can install it by clicking on the above link and copying the pip Install command from the respective page in kandi.


You can search for any dependent library on kandi like matplotlib

Environment Tested


I tested this solution in the following versions. Be mindful of changes when working with other versions.

  1. The solution is created in Python 3.9.6
  2. The solution is tested on matplotlib version 3.5.0
  3. The solution is tested on numpy version 1.21.4
  4. The solution is tested on pandas version 1.5.1


Using this solution, we are able to create a nested pie chart with matplotlib.

FAQ 

What is a nested pie chart, and what are its applications?  

A nested pie chart is a type of chart that uses many layers of concentric circles. It helps represent the relative value of different categories of data. It displays hierarchical data and compares parts of a whole. It can compare a variety of data sets. It can include the relative proportions of countries and the relative product sizes. Or it can include the relative components of an income.


How does a circular statistical plot differ from other kinds of plots?  

A circular statistical plot is a circular graph showing relationships between variables. It differs from other plots because it uses angles instead of the typical x and y axes to display the data. This allows for efficient use of space and a more intuitive way of displaying the data. A circular statistical plot can show relationships between variables with a single graph. 


Is it possible to create a donut chart using Python?  

Yes, it is possible to create a donut chart using Python. Python offers various libraries, like Matplotlib, Seaborn, and Plotly. Additionally, several online resources help you create a donut chart. We can create a donut chart. 


When should you use a bar chart over a nested pie chart for data visualization?  

Bar is over nested pie charts when comparing values or emphasizing their differences. Bar charts make it easier to compare individual values or groups of values. They also enable viewers to see the data's range of values and trends. 


What is the data intensity ratio when plotting with nested pie charts?  

When plotting with nested pie charts, the data intensity ratio is 4:1. The inner circle should represent approximately 25% of the total data. It will be when the outer circle should represent the remaining 75%. 


Are there any special libraries in Python that can help plot these charts?  

Yes, several libraries in Python can help plot charts. Examples include Matplotlib, Plotly, Seaborn, Bokeh, and Pygal. 


How do you create an outer circle when making a nested pie chart in Python?  

To create an outer circle when making a nested pie chart in Python, you can use the Matplotlib library. You can use matplotlib.pyplot.pie() function and set the radius parameter to a value greater than 1. This will create an outer circle around the nested pie chart. 


What tools can help Analyzing Data represented by Nested Pie Charts in Python?  

  • Matplotlib: Matplotlib helps create static, animated, and interactive visualizations. It is well-suited for analyzing data represented by nested pie charts. It allows users to customize their charts and add extra information. 
  • Seaborn: Seaborn is a Python data visualization library based on matplotlib. It provides an interface for creating interactive and publication-quality figures. It is useful for analyzing data from nested pie charts. 
  • Plotly: Plotly is an interactive and open-source data visualization library for Python. It provides an intuitive interface and powerful tools for creating and customizing figures. It is particularly well-suited for analyzing data represented by nested pie charts. 


How do you use given data to create a Nested Pie Chart using Python?  

We can create a nested Pie Chart with the help of the Matplotlib library. Here is an example of creating a Nested Pie Chart using the Matplotlib library: 

  • First, import the necessary libraries. 
  • Create the Nested Pie Chart using the Pie chart function. 
  • Load the data into a Pandas data frame. 
  • Finally, add a title and display the Nested Pie Chart. 


Can I customize the ggplot2 library while making Nested Pie Chart in Python?  

Customizing the ggplot2 library while making Nested Pie Charts in Python is possible. You can customize your charts to fit your needs using the customizing options. You can customize the underlying data structure. It can create custom functions to make your charts unique. It can be like labels, colors, sizes, and shapes. 

Support

  1. For any support on kandi solution kits, please use the chat
  2. For further learning resources, visit the Open Weaver Community learning page.


JavaScript react chart libraries help to create and add visualization elements in your web application. These components allow you to include various charts like bar charts, pie charts, line graphs, and lots more in your content. You will find several npm packages that allow you to create visual charts in React. Needless to say, chart.js is one of the most useful and popular of such packages. JavaScript’s accessibility, animation properties, and enhanced features enable developers to create pages that are visual as well as appealing to the viewers. Its compatibility with different platforms also makes the developer community migrate towards it, when compared to HTML or CSS. Check out our 21 best JavaScript React Chart libraries victory - composable React components; nivo - provides a rich set of dataviz components; react-native-svg-charts - One library to rule all charts for React Native.

Trending Discussions on Chart

The unauthenticated git protocol on port 9418 is no longer supported

react-chartjs-2 with chartJs 3: Error &quot;arc&quot; is not a registered element

Plotly Python update figure with dropMenu

Why is SFINAE for one of the std::basic_string constructors so restrictive?

Why does std::basic_string_view have two equality comparison operators?

Vue 3: Module '&quot;../../node_modules/vue/dist/vue&quot;' has no exported member

Angular TSLint - Cannot find builder &quot;@angular-devkit/build-angular:tslint&quot;

Multiple labels per item on Kendo chart

Scoping of variable inside a javascript map

Draw a horizontal and vertical line on mouse hover in chart js

QUESTION

The unauthenticated git protocol on port 9418 is no longer supported

Asked 2022-Mar-27 at 13:23

I have been using github actions for quite sometime but today my deployments started failing. Below is the error from github action logs

1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error: 
6  The unauthenticated git protocol on port 9418 is no longer supported.
7

Upon investigation, it appears that below section in my yml file is causing the issue.

1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error: 
6  The unauthenticated git protocol on port 9418 is no longer supported.
7    - name: Installing modules
8      run: yarn install
9

I have looked into this change log but can't seem to comprehend the issue.

Additional Details: Server: EC2 Instance Github actions steps:

1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error: 
6  The unauthenticated git protocol on port 9418 is no longer supported.
7    - name: Installing modules
8      run: yarn install
9  steps:
10  - name: Checkout
11    uses: actions/checkout@v2
12
13  - id: vars
14    run: |
15      if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo &quot;::set-output name=environment::prod_stackstream&quot; ; echo &quot;::set-output name=api-url::api&quot; ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo &quot;::set-output name=environment::staging_stackstream&quot;  ; echo &quot;::set-output name=api-url::stagingapi&quot; ; else echo &quot;::set-output name=environment::dev_stackstream&quot; ; echo &quot;::set-output name=api-url::devapi&quot; ; fi
16
17  - uses: pCYSl5EDgo/cat@master
18    id: slack
19    with:
20      path: .github/workflows/slack.txt
21
22  - name: Slack Start Notification
23    uses: 8398a7/action-slack@v3
24    env:
25      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
26      ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
27      COLOR: good
28      STATUS: '`Started`'
29    with:
30      status: custom
31      fields: workflow,job,commit,repo,ref,author,took
32      custom_payload: |
33        ${{ steps.slack.outputs.text }}
34
35  - name: Installing modules
36    env:
37      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
38    run: yarn install
39
40  - name: Create Frontend Build
41    env:
42      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
43    run: yarn build
44
45  - name: Deploy to Frontend Server DEV
46    if: ${{ contains(github.ref, 'dev') }}
47    uses: easingthemes/ssh-deploy@v2.1.5
48    env:
49      SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
50      ARGS: '-rltgoDzvO --delete'
51      SOURCE: 'deploy/'
52      REMOTE_HOST: ${{ secrets.DEV_HOST }}
53      REMOTE_USER: plyfolio-dev
54      TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
55

package.json file

1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error: 
6  The unauthenticated git protocol on port 9418 is no longer supported.
7    - name: Installing modules
8      run: yarn install
9  steps:
10  - name: Checkout
11    uses: actions/checkout@v2
12
13  - id: vars
14    run: |
15      if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo &quot;::set-output name=environment::prod_stackstream&quot; ; echo &quot;::set-output name=api-url::api&quot; ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo &quot;::set-output name=environment::staging_stackstream&quot;  ; echo &quot;::set-output name=api-url::stagingapi&quot; ; else echo &quot;::set-output name=environment::dev_stackstream&quot; ; echo &quot;::set-output name=api-url::devapi&quot; ; fi
16
17  - uses: pCYSl5EDgo/cat@master
18    id: slack
19    with:
20      path: .github/workflows/slack.txt
21
22  - name: Slack Start Notification
23    uses: 8398a7/action-slack@v3
24    env:
25      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
26      ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
27      COLOR: good
28      STATUS: '`Started`'
29    with:
30      status: custom
31      fields: workflow,job,commit,repo,ref,author,took
32      custom_payload: |
33        ${{ steps.slack.outputs.text }}
34
35  - name: Installing modules
36    env:
37      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
38    run: yarn install
39
40  - name: Create Frontend Build
41    env:
42      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
43    run: yarn build
44
45  - name: Deploy to Frontend Server DEV
46    if: ${{ contains(github.ref, 'dev') }}
47    uses: easingthemes/ssh-deploy@v2.1.5
48    env:
49      SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
50      ARGS: '-rltgoDzvO --delete'
51      SOURCE: 'deploy/'
52      REMOTE_HOST: ${{ secrets.DEV_HOST }}
53      REMOTE_USER: plyfolio-dev
54      TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
55   {
56  &quot;name&quot;: &quot;stackstream-fe&quot;,
57  &quot;version&quot;: &quot;1.0.0&quot;,
58  &quot;authors&quot;: [
59    &quot;fayyaznofal@gmail.com&quot;
60  ],
61  &quot;private&quot;: true,
62  &quot;dependencies&quot;: {
63    &quot;@fortawesome/fontawesome-svg-core&quot;: &quot;^1.2.34&quot;,
64    &quot;@fortawesome/free-solid-svg-icons&quot;: &quot;^5.15.2&quot;,
65    &quot;@fortawesome/react-fontawesome&quot;: &quot;^0.1.14&quot;,
66    &quot;@fullcalendar/bootstrap&quot;: &quot;^5.5.0&quot;,
67    &quot;@fullcalendar/core&quot;: &quot;^5.5.0&quot;,
68    &quot;@fullcalendar/daygrid&quot;: &quot;^5.5.0&quot;,
69    &quot;@fullcalendar/interaction&quot;: &quot;^5.5.0&quot;,
70    &quot;@fullcalendar/react&quot;: &quot;^5.5.0&quot;,
71    &quot;@lourenci/react-kanban&quot;: &quot;^2.1.0&quot;,
72    &quot;@redux-saga/simple-saga-monitor&quot;: &quot;^1.1.2&quot;,
73    &quot;@testing-library/jest-dom&quot;: &quot;^5.11.9&quot;,
74    &quot;@testing-library/react&quot;: &quot;^11.2.3&quot;,
75    &quot;@testing-library/user-event&quot;: &quot;^12.6.0&quot;,
76    &quot;@toast-ui/react-chart&quot;: &quot;^1.0.2&quot;,
77    &quot;@types/jest&quot;: &quot;^26.0.14&quot;,
78    &quot;@types/node&quot;: &quot;^14.10.3&quot;,
79    &quot;@types/react&quot;: &quot;^16.9.49&quot;,
80    &quot;@types/react-dom&quot;: &quot;^16.9.8&quot;,
81    &quot;@vtaits/react-color-picker&quot;: &quot;^0.1.1&quot;,
82    &quot;apexcharts&quot;: &quot;^3.23.1&quot;,
83    &quot;availity-reactstrap-validation&quot;: &quot;^2.7.0&quot;,
84    &quot;axios&quot;: &quot;^0.21.1&quot;,
85    &quot;axios-mock-adapter&quot;: &quot;^1.19.0&quot;,
86    &quot;axios-progress-bar&quot;: &quot;^1.2.0&quot;,
87    &quot;bootstrap&quot;: &quot;^5.0.0-beta2&quot;,
88    &quot;chart.js&quot;: &quot;^2.9.4&quot;,
89    &quot;chartist&quot;: &quot;^0.11.4&quot;,
90    &quot;classnames&quot;: &quot;^2.2.6&quot;,
91    &quot;components&quot;: &quot;^0.1.0&quot;,
92    &quot;dotenv&quot;: &quot;^8.2.0&quot;,
93    &quot;draft-js&quot;: &quot;^0.11.7&quot;,
94    &quot;echarts&quot;: &quot;^4.9.0&quot;,
95    &quot;echarts-for-react&quot;: &quot;^2.0.16&quot;,
96    &quot;firebase&quot;: &quot;^8.2.3&quot;,
97    &quot;google-maps-react&quot;: &quot;^2.0.6&quot;,
98    &quot;history&quot;: &quot;^4.10.1&quot;,
99    &quot;i&quot;: &quot;^0.3.6&quot;,
100    &quot;i18next&quot;: &quot;^19.8.4&quot;,
101    &quot;i18next-browser-languagedetector&quot;: &quot;^6.0.1&quot;,
102    &quot;jsonwebtoken&quot;: &quot;^8.5.1&quot;,
103    &quot;leaflet&quot;: &quot;^1.7.1&quot;,
104    &quot;lodash&quot;: &quot;^4.17.21&quot;,
105    &quot;lodash.clonedeep&quot;: &quot;^4.5.0&quot;,
106    &quot;lodash.get&quot;: &quot;^4.4.2&quot;,
107    &quot;metismenujs&quot;: &quot;^1.2.1&quot;,
108    &quot;mkdirp&quot;: &quot;^1.0.4&quot;,
109    &quot;moment&quot;: &quot;2.29.1&quot;,
110    &quot;moment-timezone&quot;: &quot;^0.5.32&quot;,
111    &quot;nouislider-react&quot;: &quot;^3.3.9&quot;,
112    &quot;npm&quot;: &quot;^7.6.3&quot;,
113    &quot;prop-types&quot;: &quot;^15.7.2&quot;,
114    &quot;query-string&quot;: &quot;^6.14.0&quot;,
115    &quot;react&quot;: &quot;^16.13.1&quot;,
116    &quot;react-apexcharts&quot;: &quot;^1.3.7&quot;,
117    &quot;react-auth-code-input&quot;: &quot;^1.0.0&quot;,
118    &quot;react-avatar&quot;: &quot;^3.10.0&quot;,
119    &quot;react-bootstrap&quot;: &quot;^1.5.0&quot;,
120    &quot;react-bootstrap-editable&quot;: &quot;^0.8.2&quot;,
121    &quot;react-bootstrap-sweetalert&quot;: &quot;^5.2.0&quot;,
122    &quot;react-bootstrap-table-next&quot;: &quot;^4.0.3&quot;,
123    &quot;react-bootstrap-table2-editor&quot;: &quot;^1.4.0&quot;,
124    &quot;react-bootstrap-table2-paginator&quot;: &quot;^2.1.2&quot;,
125    &quot;react-bootstrap-table2-toolkit&quot;: &quot;^2.1.3&quot;,
126    &quot;react-chartist&quot;: &quot;^0.14.3&quot;,
127    &quot;react-chartjs-2&quot;: &quot;^2.11.1&quot;,
128    &quot;react-color&quot;: &quot;^2.19.3&quot;,
129    &quot;react-confirm-alert&quot;: &quot;^2.7.0&quot;,
130    &quot;react-content-loader&quot;: &quot;^6.0.1&quot;,
131    &quot;react-countdown&quot;: &quot;^2.3.1&quot;,
132    &quot;react-countup&quot;: &quot;^4.3.3&quot;,
133    &quot;react-cropper&quot;: &quot;^2.1.4&quot;,
134    &quot;react-data-table-component&quot;: &quot;^6.11.8&quot;,
135    &quot;react-date-picker&quot;: &quot;^8.0.6&quot;,
136    &quot;react-datepicker&quot;: &quot;^3.4.1&quot;,
137    &quot;react-dom&quot;: &quot;^16.13.1&quot;,
138    &quot;react-draft-wysiwyg&quot;: &quot;^1.14.5&quot;,
139    &quot;react-drag-listview&quot;: &quot;^0.1.8&quot;,
140    &quot;react-drawer&quot;: &quot;^1.3.4&quot;,
141    &quot;react-dropzone&quot;: &quot;^11.2.4&quot;,
142    &quot;react-dual-listbox&quot;: &quot;^2.0.0&quot;,
143    &quot;react-facebook-login&quot;: &quot;^4.1.1&quot;,
144    &quot;react-flatpickr&quot;: &quot;^3.10.6&quot;,
145    &quot;react-google-login&quot;: &quot;^5.2.2&quot;,
146    &quot;react-hook-form&quot;: &quot;^7.15.2&quot;,
147    &quot;react-i18next&quot;: &quot;^11.8.5&quot;,
148    &quot;react-icons&quot;: &quot;^4.2.0&quot;,
149    &quot;react-image-lightbox&quot;: &quot;^5.1.1&quot;,
150    &quot;react-input-mask&quot;: &quot;^2.0.4&quot;,
151    &quot;react-jvectormap&quot;: &quot;^0.0.16&quot;,
152    &quot;react-leaflet&quot;: &quot;^3.0.5&quot;,
153    &quot;react-meta-tags&quot;: &quot;^1.0.1&quot;,
154    &quot;react-modal-video&quot;: &quot;^1.2.6&quot;,
155    &quot;react-notifications&quot;: &quot;^1.7.2&quot;,
156    &quot;react-number-format&quot;: &quot;^4.7.3&quot;,
157    &quot;react-perfect-scrollbar&quot;: &quot;^1.5.8&quot;,
158    &quot;react-rangeslider&quot;: &quot;^2.2.0&quot;,
159    &quot;react-rating&quot;: &quot;^2.0.5&quot;,
160    &quot;react-rating-tooltip&quot;: &quot;^1.1.6&quot;,
161    &quot;react-redux&quot;: &quot;^7.2.1&quot;,
162    &quot;react-responsive-carousel&quot;: &quot;^3.2.11&quot;,
163    &quot;react-router-dom&quot;: &quot;^5.2.0&quot;,
164    &quot;react-script&quot;: &quot;^2.0.5&quot;,
165    &quot;react-scripts&quot;: &quot;3.4.3&quot;,
166    &quot;react-select&quot;: &quot;^4.3.1&quot;,
167    &quot;react-sparklines&quot;: &quot;^1.7.0&quot;,
168    &quot;react-star-ratings&quot;: &quot;^2.3.0&quot;,
169    &quot;react-super-responsive-table&quot;: &quot;^5.2.0&quot;,
170    &quot;react-switch&quot;: &quot;^6.0.0&quot;,
171    &quot;react-table&quot;: &quot;^7.6.3&quot;,
172    &quot;react-toastify&quot;: &quot;^7.0.3&quot;,
173    &quot;react-toastr&quot;: &quot;^3.0.0&quot;,
174    &quot;react-twitter-auth&quot;: &quot;0.0.13&quot;,
175    &quot;reactstrap&quot;: &quot;^8.8.1&quot;,
176    &quot;recharts&quot;: &quot;^2.0.8&quot;,
177    &quot;redux&quot;: &quot;^4.0.5&quot;,
178    &quot;redux-saga&quot;: &quot;^1.1.3&quot;,
179    &quot;reselect&quot;: &quot;^4.0.0&quot;,
180    &quot;sass&quot;: &quot;^1.37.5&quot;,
181    &quot;simplebar-react&quot;: &quot;^2.3.0&quot;,
182    &quot;styled&quot;: &quot;^1.0.0&quot;,
183    &quot;styled-components&quot;: &quot;^5.2.1&quot;,
184    &quot;toastr&quot;: &quot;^2.1.4&quot;,
185    &quot;typescript&quot;: &quot;^4.0.2&quot;,
186    &quot;universal-cookie&quot;: &quot;^4.0.4&quot;
187  },
188  &quot;devDependencies&quot;: {
189    &quot;@typescript-eslint/eslint-plugin&quot;: &quot;^2.27.0&quot;,
190    &quot;@typescript-eslint/parser&quot;: &quot;^2.27.0&quot;,
191    &quot;@typescript-eslint/typescript-estree&quot;: &quot;^4.15.2&quot;,
192    &quot;eslint-config-prettier&quot;: &quot;^6.10.1&quot;,
193    &quot;eslint-plugin-prettier&quot;: &quot;^3.1.2&quot;,
194    &quot;husky&quot;: &quot;^4.2.5&quot;,
195    &quot;lint-staged&quot;: &quot;^10.1.3&quot;,
196    &quot;prettier&quot;: &quot;^1.19.1&quot;,
197    &quot;react-test-renderer&quot;: &quot;^16.13.1&quot;,
198    &quot;redux-devtools-extension&quot;: &quot;^2.13.8&quot;,
199    &quot;redux-mock-store&quot;: &quot;^1.5.4&quot;
200  },
201  &quot;scripts&quot;: {
202    &quot;start&quot;: &quot;react-scripts start&quot;,
203    &quot;build&quot;: &quot;react-scripts build &amp;&amp; mv build ./deploy/build&quot;,
204    &quot;build-local&quot;: &quot;react-scripts build&quot;,
205    &quot;test&quot;: &quot;react-scripts test&quot;,
206    &quot;eject&quot;: &quot;react-scripts eject&quot;
207  },
208  &quot;eslintConfig&quot;: {
209    &quot;extends&quot;: &quot;react-app&quot;
210  },
211  &quot;husky&quot;: {
212    &quot;hooks&quot;: {
213      &quot;pre-commit&quot;: &quot;lint-staged&quot;
214    }
215  },
216  &quot;lint-staged&quot;: {
217    &quot;*.{js,ts,tsx}&quot;: [
218      &quot;eslint --fix&quot;
219    ]
220  },
221  &quot;browserslist&quot;: {
222    &quot;production&quot;: [
223      &quot;&gt;0.2%&quot;,
224      &quot;not dead&quot;,
225      &quot;not op_mini all&quot;
226    ],
227    &quot;development&quot;: [
228      &quot;last 1 chrome version&quot;,
229      &quot;last 1 firefox version&quot;,
230      &quot;last 1 safari version&quot;
231    ]
232  }
233}
234

ANSWER

Answered 2022-Mar-16 at 07:01

First, this error message is indeed expected on Jan. 11th, 2022.
See "Improving Git protocol security on GitHub".

January 11, 2022 Final brownout.

This is the full brownout period where we’ll temporarily stop accepting the deprecated key and signature types, ciphers, and MACs, and the unencrypted Git protocol.
This will help clients discover any lingering use of older keys or old URLs.

Second, check your package.json dependencies for any git:// URL, as in this example, fixed in this PR.

As noted by Jörg W Mittag:

There was a 4-month warning.
The entire Internet has been moving away from unauthenticated, unencrypted protocols for a decade, it's not like this is a huge surprise.

Personally, I consider it less an "issue" and more "detecting unmaintained dependencies".

Plus, this is still only the brownout period, so the protocol will only be disabled for a short period of time, allowing developers to discover the problem.

The permanent shutdown is not until March 15th.


For GitHub Actions:

As in actions/checkout issue 14, you can add as a first step:

1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error: 
6  The unauthenticated git protocol on port 9418 is no longer supported.
7    - name: Installing modules
8      run: yarn install
9  steps:
10  - name: Checkout
11    uses: actions/checkout@v2
12
13  - id: vars
14    run: |
15      if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo &quot;::set-output name=environment::prod_stackstream&quot; ; echo &quot;::set-output name=api-url::api&quot; ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo &quot;::set-output name=environment::staging_stackstream&quot;  ; echo &quot;::set-output name=api-url::stagingapi&quot; ; else echo &quot;::set-output name=environment::dev_stackstream&quot; ; echo &quot;::set-output name=api-url::devapi&quot; ; fi
16
17  - uses: pCYSl5EDgo/cat@master
18    id: slack
19    with:
20      path: .github/workflows/slack.txt
21
22  - name: Slack Start Notification
23    uses: 8398a7/action-slack@v3
24    env:
25      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
26      ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
27      COLOR: good
28      STATUS: '`Started`'
29    with:
30      status: custom
31      fields: workflow,job,commit,repo,ref,author,took
32      custom_payload: |
33        ${{ steps.slack.outputs.text }}
34
35  - name: Installing modules
36    env:
37      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
38    run: yarn install
39
40  - name: Create Frontend Build
41    env:
42      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
43    run: yarn build
44
45  - name: Deploy to Frontend Server DEV
46    if: ${{ contains(github.ref, 'dev') }}
47    uses: easingthemes/ssh-deploy@v2.1.5
48    env:
49      SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
50      ARGS: '-rltgoDzvO --delete'
51      SOURCE: 'deploy/'
52      REMOTE_HOST: ${{ secrets.DEV_HOST }}
53      REMOTE_USER: plyfolio-dev
54      TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
55   {
56  &quot;name&quot;: &quot;stackstream-fe&quot;,
57  &quot;version&quot;: &quot;1.0.0&quot;,
58  &quot;authors&quot;: [
59    &quot;fayyaznofal@gmail.com&quot;
60  ],
61  &quot;private&quot;: true,
62  &quot;dependencies&quot;: {
63    &quot;@fortawesome/fontawesome-svg-core&quot;: &quot;^1.2.34&quot;,
64    &quot;@fortawesome/free-solid-svg-icons&quot;: &quot;^5.15.2&quot;,
65    &quot;@fortawesome/react-fontawesome&quot;: &quot;^0.1.14&quot;,
66    &quot;@fullcalendar/bootstrap&quot;: &quot;^5.5.0&quot;,
67    &quot;@fullcalendar/core&quot;: &quot;^5.5.0&quot;,
68    &quot;@fullcalendar/daygrid&quot;: &quot;^5.5.0&quot;,
69    &quot;@fullcalendar/interaction&quot;: &quot;^5.5.0&quot;,
70    &quot;@fullcalendar/react&quot;: &quot;^5.5.0&quot;,
71    &quot;@lourenci/react-kanban&quot;: &quot;^2.1.0&quot;,
72    &quot;@redux-saga/simple-saga-monitor&quot;: &quot;^1.1.2&quot;,
73    &quot;@testing-library/jest-dom&quot;: &quot;^5.11.9&quot;,
74    &quot;@testing-library/react&quot;: &quot;^11.2.3&quot;,
75    &quot;@testing-library/user-event&quot;: &quot;^12.6.0&quot;,
76    &quot;@toast-ui/react-chart&quot;: &quot;^1.0.2&quot;,
77    &quot;@types/jest&quot;: &quot;^26.0.14&quot;,
78    &quot;@types/node&quot;: &quot;^14.10.3&quot;,
79    &quot;@types/react&quot;: &quot;^16.9.49&quot;,
80    &quot;@types/react-dom&quot;: &quot;^16.9.8&quot;,
81    &quot;@vtaits/react-color-picker&quot;: &quot;^0.1.1&quot;,
82    &quot;apexcharts&quot;: &quot;^3.23.1&quot;,
83    &quot;availity-reactstrap-validation&quot;: &quot;^2.7.0&quot;,
84    &quot;axios&quot;: &quot;^0.21.1&quot;,
85    &quot;axios-mock-adapter&quot;: &quot;^1.19.0&quot;,
86    &quot;axios-progress-bar&quot;: &quot;^1.2.0&quot;,
87    &quot;bootstrap&quot;: &quot;^5.0.0-beta2&quot;,
88    &quot;chart.js&quot;: &quot;^2.9.4&quot;,
89    &quot;chartist&quot;: &quot;^0.11.4&quot;,
90    &quot;classnames&quot;: &quot;^2.2.6&quot;,
91    &quot;components&quot;: &quot;^0.1.0&quot;,
92    &quot;dotenv&quot;: &quot;^8.2.0&quot;,
93    &quot;draft-js&quot;: &quot;^0.11.7&quot;,
94    &quot;echarts&quot;: &quot;^4.9.0&quot;,
95    &quot;echarts-for-react&quot;: &quot;^2.0.16&quot;,
96    &quot;firebase&quot;: &quot;^8.2.3&quot;,
97    &quot;google-maps-react&quot;: &quot;^2.0.6&quot;,
98    &quot;history&quot;: &quot;^4.10.1&quot;,
99    &quot;i&quot;: &quot;^0.3.6&quot;,
100    &quot;i18next&quot;: &quot;^19.8.4&quot;,
101    &quot;i18next-browser-languagedetector&quot;: &quot;^6.0.1&quot;,
102    &quot;jsonwebtoken&quot;: &quot;^8.5.1&quot;,
103    &quot;leaflet&quot;: &quot;^1.7.1&quot;,
104    &quot;lodash&quot;: &quot;^4.17.21&quot;,
105    &quot;lodash.clonedeep&quot;: &quot;^4.5.0&quot;,
106    &quot;lodash.get&quot;: &quot;^4.4.2&quot;,
107    &quot;metismenujs&quot;: &quot;^1.2.1&quot;,
108    &quot;mkdirp&quot;: &quot;^1.0.4&quot;,
109    &quot;moment&quot;: &quot;2.29.1&quot;,
110    &quot;moment-timezone&quot;: &quot;^0.5.32&quot;,
111    &quot;nouislider-react&quot;: &quot;^3.3.9&quot;,
112    &quot;npm&quot;: &quot;^7.6.3&quot;,
113    &quot;prop-types&quot;: &quot;^15.7.2&quot;,
114    &quot;query-string&quot;: &quot;^6.14.0&quot;,
115    &quot;react&quot;: &quot;^16.13.1&quot;,
116    &quot;react-apexcharts&quot;: &quot;^1.3.7&quot;,
117    &quot;react-auth-code-input&quot;: &quot;^1.0.0&quot;,
118    &quot;react-avatar&quot;: &quot;^3.10.0&quot;,
119    &quot;react-bootstrap&quot;: &quot;^1.5.0&quot;,
120    &quot;react-bootstrap-editable&quot;: &quot;^0.8.2&quot;,
121    &quot;react-bootstrap-sweetalert&quot;: &quot;^5.2.0&quot;,
122    &quot;react-bootstrap-table-next&quot;: &quot;^4.0.3&quot;,
123    &quot;react-bootstrap-table2-editor&quot;: &quot;^1.4.0&quot;,
124    &quot;react-bootstrap-table2-paginator&quot;: &quot;^2.1.2&quot;,
125    &quot;react-bootstrap-table2-toolkit&quot;: &quot;^2.1.3&quot;,
126    &quot;react-chartist&quot;: &quot;^0.14.3&quot;,
127    &quot;react-chartjs-2&quot;: &quot;^2.11.1&quot;,
128    &quot;react-color&quot;: &quot;^2.19.3&quot;,
129    &quot;react-confirm-alert&quot;: &quot;^2.7.0&quot;,
130    &quot;react-content-loader&quot;: &quot;^6.0.1&quot;,
131    &quot;react-countdown&quot;: &quot;^2.3.1&quot;,
132    &quot;react-countup&quot;: &quot;^4.3.3&quot;,
133    &quot;react-cropper&quot;: &quot;^2.1.4&quot;,
134    &quot;react-data-table-component&quot;: &quot;^6.11.8&quot;,
135    &quot;react-date-picker&quot;: &quot;^8.0.6&quot;,
136    &quot;react-datepicker&quot;: &quot;^3.4.1&quot;,
137    &quot;react-dom&quot;: &quot;^16.13.1&quot;,
138    &quot;react-draft-wysiwyg&quot;: &quot;^1.14.5&quot;,
139    &quot;react-drag-listview&quot;: &quot;^0.1.8&quot;,
140    &quot;react-drawer&quot;: &quot;^1.3.4&quot;,
141    &quot;react-dropzone&quot;: &quot;^11.2.4&quot;,
142    &quot;react-dual-listbox&quot;: &quot;^2.0.0&quot;,
143    &quot;react-facebook-login&quot;: &quot;^4.1.1&quot;,
144    &quot;react-flatpickr&quot;: &quot;^3.10.6&quot;,
145    &quot;react-google-login&quot;: &quot;^5.2.2&quot;,
146    &quot;react-hook-form&quot;: &quot;^7.15.2&quot;,
147    &quot;react-i18next&quot;: &quot;^11.8.5&quot;,
148    &quot;react-icons&quot;: &quot;^4.2.0&quot;,
149    &quot;react-image-lightbox&quot;: &quot;^5.1.1&quot;,
150    &quot;react-input-mask&quot;: &quot;^2.0.4&quot;,
151    &quot;react-jvectormap&quot;: &quot;^0.0.16&quot;,
152    &quot;react-leaflet&quot;: &quot;^3.0.5&quot;,
153    &quot;react-meta-tags&quot;: &quot;^1.0.1&quot;,
154    &quot;react-modal-video&quot;: &quot;^1.2.6&quot;,
155    &quot;react-notifications&quot;: &quot;^1.7.2&quot;,
156    &quot;react-number-format&quot;: &quot;^4.7.3&quot;,
157    &quot;react-perfect-scrollbar&quot;: &quot;^1.5.8&quot;,
158    &quot;react-rangeslider&quot;: &quot;^2.2.0&quot;,
159    &quot;react-rating&quot;: &quot;^2.0.5&quot;,
160    &quot;react-rating-tooltip&quot;: &quot;^1.1.6&quot;,
161    &quot;react-redux&quot;: &quot;^7.2.1&quot;,
162    &quot;react-responsive-carousel&quot;: &quot;^3.2.11&quot;,
163    &quot;react-router-dom&quot;: &quot;^5.2.0&quot;,
164    &quot;react-script&quot;: &quot;^2.0.5&quot;,
165    &quot;react-scripts&quot;: &quot;3.4.3&quot;,
166    &quot;react-select&quot;: &quot;^4.3.1&quot;,
167    &quot;react-sparklines&quot;: &quot;^1.7.0&quot;,
168    &quot;react-star-ratings&quot;: &quot;^2.3.0&quot;,
169    &quot;react-super-responsive-table&quot;: &quot;^5.2.0&quot;,
170    &quot;react-switch&quot;: &quot;^6.0.0&quot;,
171    &quot;react-table&quot;: &quot;^7.6.3&quot;,
172    &quot;react-toastify&quot;: &quot;^7.0.3&quot;,
173    &quot;react-toastr&quot;: &quot;^3.0.0&quot;,
174    &quot;react-twitter-auth&quot;: &quot;0.0.13&quot;,
175    &quot;reactstrap&quot;: &quot;^8.8.1&quot;,
176    &quot;recharts&quot;: &quot;^2.0.8&quot;,
177    &quot;redux&quot;: &quot;^4.0.5&quot;,
178    &quot;redux-saga&quot;: &quot;^1.1.3&quot;,
179    &quot;reselect&quot;: &quot;^4.0.0&quot;,
180    &quot;sass&quot;: &quot;^1.37.5&quot;,
181    &quot;simplebar-react&quot;: &quot;^2.3.0&quot;,
182    &quot;styled&quot;: &quot;^1.0.0&quot;,
183    &quot;styled-components&quot;: &quot;^5.2.1&quot;,
184    &quot;toastr&quot;: &quot;^2.1.4&quot;,
185    &quot;typescript&quot;: &quot;^4.0.2&quot;,
186    &quot;universal-cookie&quot;: &quot;^4.0.4&quot;
187  },
188  &quot;devDependencies&quot;: {
189    &quot;@typescript-eslint/eslint-plugin&quot;: &quot;^2.27.0&quot;,
190    &quot;@typescript-eslint/parser&quot;: &quot;^2.27.0&quot;,
191    &quot;@typescript-eslint/typescript-estree&quot;: &quot;^4.15.2&quot;,
192    &quot;eslint-config-prettier&quot;: &quot;^6.10.1&quot;,
193    &quot;eslint-plugin-prettier&quot;: &quot;^3.1.2&quot;,
194    &quot;husky&quot;: &quot;^4.2.5&quot;,
195    &quot;lint-staged&quot;: &quot;^10.1.3&quot;,
196    &quot;prettier&quot;: &quot;^1.19.1&quot;,
197    &quot;react-test-renderer&quot;: &quot;^16.13.1&quot;,
198    &quot;redux-devtools-extension&quot;: &quot;^2.13.8&quot;,
199    &quot;redux-mock-store&quot;: &quot;^1.5.4&quot;
200  },
201  &quot;scripts&quot;: {
202    &quot;start&quot;: &quot;react-scripts start&quot;,
203    &quot;build&quot;: &quot;react-scripts build &amp;&amp; mv build ./deploy/build&quot;,
204    &quot;build-local&quot;: &quot;react-scripts build&quot;,
205    &quot;test&quot;: &quot;react-scripts test&quot;,
206    &quot;eject&quot;: &quot;react-scripts eject&quot;
207  },
208  &quot;eslintConfig&quot;: {
209    &quot;extends&quot;: &quot;react-app&quot;
210  },
211  &quot;husky&quot;: {
212    &quot;hooks&quot;: {
213      &quot;pre-commit&quot;: &quot;lint-staged&quot;
214    }
215  },
216  &quot;lint-staged&quot;: {
217    &quot;*.{js,ts,tsx}&quot;: [
218      &quot;eslint --fix&quot;
219    ]
220  },
221  &quot;browserslist&quot;: {
222    &quot;production&quot;: [
223      &quot;&gt;0.2%&quot;,
224      &quot;not dead&quot;,
225      &quot;not op_mini all&quot;
226    ],
227    &quot;development&quot;: [
228      &quot;last 1 chrome version&quot;,
229      &quot;last 1 firefox version&quot;,
230      &quot;last 1 safari version&quot;
231    ]
232  }
233}
234    - name: Fix up git URLs
235      run: echo -e '[url &quot;https://github.com/&quot;]\n  insteadOf = &quot;git://github.com/&quot;' &gt;&gt; ~/.gitconfig
236

That will change any git://github.com/ into https://github.com/.

For local projects

For all your repositories, you can set:

1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error: 
6  The unauthenticated git protocol on port 9418 is no longer supported.
7    - name: Installing modules
8      run: yarn install
9  steps:
10  - name: Checkout
11    uses: actions/checkout@v2
12
13  - id: vars
14    run: |
15      if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo &quot;::set-output name=environment::prod_stackstream&quot; ; echo &quot;::set-output name=api-url::api&quot; ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo &quot;::set-output name=environment::staging_stackstream&quot;  ; echo &quot;::set-output name=api-url::stagingapi&quot; ; else echo &quot;::set-output name=environment::dev_stackstream&quot; ; echo &quot;::set-output name=api-url::devapi&quot; ; fi
16
17  - uses: pCYSl5EDgo/cat@master
18    id: slack
19    with:
20      path: .github/workflows/slack.txt
21
22  - name: Slack Start Notification
23    uses: 8398a7/action-slack@v3
24    env:
25      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
26      ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
27      COLOR: good
28      STATUS: '`Started`'
29    with:
30      status: custom
31      fields: workflow,job,commit,repo,ref,author,took
32      custom_payload: |
33        ${{ steps.slack.outputs.text }}
34
35  - name: Installing modules
36    env:
37      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
38    run: yarn install
39
40  - name: Create Frontend Build
41    env:
42      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
43    run: yarn build
44
45  - name: Deploy to Frontend Server DEV
46    if: ${{ contains(github.ref, 'dev') }}
47    uses: easingthemes/ssh-deploy@v2.1.5
48    env:
49      SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
50      ARGS: '-rltgoDzvO --delete'
51      SOURCE: 'deploy/'
52      REMOTE_HOST: ${{ secrets.DEV_HOST }}
53      REMOTE_USER: plyfolio-dev
54      TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
55   {
56  &quot;name&quot;: &quot;stackstream-fe&quot;,
57  &quot;version&quot;: &quot;1.0.0&quot;,
58  &quot;authors&quot;: [
59    &quot;fayyaznofal@gmail.com&quot;
60  ],
61  &quot;private&quot;: true,
62  &quot;dependencies&quot;: {
63    &quot;@fortawesome/fontawesome-svg-core&quot;: &quot;^1.2.34&quot;,
64    &quot;@fortawesome/free-solid-svg-icons&quot;: &quot;^5.15.2&quot;,
65    &quot;@fortawesome/react-fontawesome&quot;: &quot;^0.1.14&quot;,
66    &quot;@fullcalendar/bootstrap&quot;: &quot;^5.5.0&quot;,
67    &quot;@fullcalendar/core&quot;: &quot;^5.5.0&quot;,
68    &quot;@fullcalendar/daygrid&quot;: &quot;^5.5.0&quot;,
69    &quot;@fullcalendar/interaction&quot;: &quot;^5.5.0&quot;,
70    &quot;@fullcalendar/react&quot;: &quot;^5.5.0&quot;,
71    &quot;@lourenci/react-kanban&quot;: &quot;^2.1.0&quot;,
72    &quot;@redux-saga/simple-saga-monitor&quot;: &quot;^1.1.2&quot;,
73    &quot;@testing-library/jest-dom&quot;: &quot;^5.11.9&quot;,
74    &quot;@testing-library/react&quot;: &quot;^11.2.3&quot;,
75    &quot;@testing-library/user-event&quot;: &quot;^12.6.0&quot;,
76    &quot;@toast-ui/react-chart&quot;: &quot;^1.0.2&quot;,
77    &quot;@types/jest&quot;: &quot;^26.0.14&quot;,
78    &quot;@types/node&quot;: &quot;^14.10.3&quot;,
79    &quot;@types/react&quot;: &quot;^16.9.49&quot;,
80    &quot;@types/react-dom&quot;: &quot;^16.9.8&quot;,
81    &quot;@vtaits/react-color-picker&quot;: &quot;^0.1.1&quot;,
82    &quot;apexcharts&quot;: &quot;^3.23.1&quot;,
83    &quot;availity-reactstrap-validation&quot;: &quot;^2.7.0&quot;,
84    &quot;axios&quot;: &quot;^0.21.1&quot;,
85    &quot;axios-mock-adapter&quot;: &quot;^1.19.0&quot;,
86    &quot;axios-progress-bar&quot;: &quot;^1.2.0&quot;,
87    &quot;bootstrap&quot;: &quot;^5.0.0-beta2&quot;,
88    &quot;chart.js&quot;: &quot;^2.9.4&quot;,
89    &quot;chartist&quot;: &quot;^0.11.4&quot;,
90    &quot;classnames&quot;: &quot;^2.2.6&quot;,
91    &quot;components&quot;: &quot;^0.1.0&quot;,
92    &quot;dotenv&quot;: &quot;^8.2.0&quot;,
93    &quot;draft-js&quot;: &quot;^0.11.7&quot;,
94    &quot;echarts&quot;: &quot;^4.9.0&quot;,
95    &quot;echarts-for-react&quot;: &quot;^2.0.16&quot;,
96    &quot;firebase&quot;: &quot;^8.2.3&quot;,
97    &quot;google-maps-react&quot;: &quot;^2.0.6&quot;,
98    &quot;history&quot;: &quot;^4.10.1&quot;,
99    &quot;i&quot;: &quot;^0.3.6&quot;,
100    &quot;i18next&quot;: &quot;^19.8.4&quot;,
101    &quot;i18next-browser-languagedetector&quot;: &quot;^6.0.1&quot;,
102    &quot;jsonwebtoken&quot;: &quot;^8.5.1&quot;,
103    &quot;leaflet&quot;: &quot;^1.7.1&quot;,
104    &quot;lodash&quot;: &quot;^4.17.21&quot;,
105    &quot;lodash.clonedeep&quot;: &quot;^4.5.0&quot;,
106    &quot;lodash.get&quot;: &quot;^4.4.2&quot;,
107    &quot;metismenujs&quot;: &quot;^1.2.1&quot;,
108    &quot;mkdirp&quot;: &quot;^1.0.4&quot;,
109    &quot;moment&quot;: &quot;2.29.1&quot;,
110    &quot;moment-timezone&quot;: &quot;^0.5.32&quot;,
111    &quot;nouislider-react&quot;: &quot;^3.3.9&quot;,
112    &quot;npm&quot;: &quot;^7.6.3&quot;,
113    &quot;prop-types&quot;: &quot;^15.7.2&quot;,
114    &quot;query-string&quot;: &quot;^6.14.0&quot;,
115    &quot;react&quot;: &quot;^16.13.1&quot;,
116    &quot;react-apexcharts&quot;: &quot;^1.3.7&quot;,
117    &quot;react-auth-code-input&quot;: &quot;^1.0.0&quot;,
118    &quot;react-avatar&quot;: &quot;^3.10.0&quot;,
119    &quot;react-bootstrap&quot;: &quot;^1.5.0&quot;,
120    &quot;react-bootstrap-editable&quot;: &quot;^0.8.2&quot;,
121    &quot;react-bootstrap-sweetalert&quot;: &quot;^5.2.0&quot;,
122    &quot;react-bootstrap-table-next&quot;: &quot;^4.0.3&quot;,
123    &quot;react-bootstrap-table2-editor&quot;: &quot;^1.4.0&quot;,
124    &quot;react-bootstrap-table2-paginator&quot;: &quot;^2.1.2&quot;,
125    &quot;react-bootstrap-table2-toolkit&quot;: &quot;^2.1.3&quot;,
126    &quot;react-chartist&quot;: &quot;^0.14.3&quot;,
127    &quot;react-chartjs-2&quot;: &quot;^2.11.1&quot;,
128    &quot;react-color&quot;: &quot;^2.19.3&quot;,
129    &quot;react-confirm-alert&quot;: &quot;^2.7.0&quot;,
130    &quot;react-content-loader&quot;: &quot;^6.0.1&quot;,
131    &quot;react-countdown&quot;: &quot;^2.3.1&quot;,
132    &quot;react-countup&quot;: &quot;^4.3.3&quot;,
133    &quot;react-cropper&quot;: &quot;^2.1.4&quot;,
134    &quot;react-data-table-component&quot;: &quot;^6.11.8&quot;,
135    &quot;react-date-picker&quot;: &quot;^8.0.6&quot;,
136    &quot;react-datepicker&quot;: &quot;^3.4.1&quot;,
137    &quot;react-dom&quot;: &quot;^16.13.1&quot;,
138    &quot;react-draft-wysiwyg&quot;: &quot;^1.14.5&quot;,
139    &quot;react-drag-listview&quot;: &quot;^0.1.8&quot;,
140    &quot;react-drawer&quot;: &quot;^1.3.4&quot;,
141    &quot;react-dropzone&quot;: &quot;^11.2.4&quot;,
142    &quot;react-dual-listbox&quot;: &quot;^2.0.0&quot;,
143    &quot;react-facebook-login&quot;: &quot;^4.1.1&quot;,
144    &quot;react-flatpickr&quot;: &quot;^3.10.6&quot;,
145    &quot;react-google-login&quot;: &quot;^5.2.2&quot;,
146    &quot;react-hook-form&quot;: &quot;^7.15.2&quot;,
147    &quot;react-i18next&quot;: &quot;^11.8.5&quot;,
148    &quot;react-icons&quot;: &quot;^4.2.0&quot;,
149    &quot;react-image-lightbox&quot;: &quot;^5.1.1&quot;,
150    &quot;react-input-mask&quot;: &quot;^2.0.4&quot;,
151    &quot;react-jvectormap&quot;: &quot;^0.0.16&quot;,
152    &quot;react-leaflet&quot;: &quot;^3.0.5&quot;,
153    &quot;react-meta-tags&quot;: &quot;^1.0.1&quot;,
154    &quot;react-modal-video&quot;: &quot;^1.2.6&quot;,
155    &quot;react-notifications&quot;: &quot;^1.7.2&quot;,
156    &quot;react-number-format&quot;: &quot;^4.7.3&quot;,
157    &quot;react-perfect-scrollbar&quot;: &quot;^1.5.8&quot;,
158    &quot;react-rangeslider&quot;: &quot;^2.2.0&quot;,
159    &quot;react-rating&quot;: &quot;^2.0.5&quot;,
160    &quot;react-rating-tooltip&quot;: &quot;^1.1.6&quot;,
161    &quot;react-redux&quot;: &quot;^7.2.1&quot;,
162    &quot;react-responsive-carousel&quot;: &quot;^3.2.11&quot;,
163    &quot;react-router-dom&quot;: &quot;^5.2.0&quot;,
164    &quot;react-script&quot;: &quot;^2.0.5&quot;,
165    &quot;react-scripts&quot;: &quot;3.4.3&quot;,
166    &quot;react-select&quot;: &quot;^4.3.1&quot;,
167    &quot;react-sparklines&quot;: &quot;^1.7.0&quot;,
168    &quot;react-star-ratings&quot;: &quot;^2.3.0&quot;,
169    &quot;react-super-responsive-table&quot;: &quot;^5.2.0&quot;,
170    &quot;react-switch&quot;: &quot;^6.0.0&quot;,
171    &quot;react-table&quot;: &quot;^7.6.3&quot;,
172    &quot;react-toastify&quot;: &quot;^7.0.3&quot;,
173    &quot;react-toastr&quot;: &quot;^3.0.0&quot;,
174    &quot;react-twitter-auth&quot;: &quot;0.0.13&quot;,
175    &quot;reactstrap&quot;: &quot;^8.8.1&quot;,
176    &quot;recharts&quot;: &quot;^2.0.8&quot;,
177    &quot;redux&quot;: &quot;^4.0.5&quot;,
178    &quot;redux-saga&quot;: &quot;^1.1.3&quot;,
179    &quot;reselect&quot;: &quot;^4.0.0&quot;,
180    &quot;sass&quot;: &quot;^1.37.5&quot;,
181    &quot;simplebar-react&quot;: &quot;^2.3.0&quot;,
182    &quot;styled&quot;: &quot;^1.0.0&quot;,
183    &quot;styled-components&quot;: &quot;^5.2.1&quot;,
184    &quot;toastr&quot;: &quot;^2.1.4&quot;,
185    &quot;typescript&quot;: &quot;^4.0.2&quot;,
186    &quot;universal-cookie&quot;: &quot;^4.0.4&quot;
187  },
188  &quot;devDependencies&quot;: {
189    &quot;@typescript-eslint/eslint-plugin&quot;: &quot;^2.27.0&quot;,
190    &quot;@typescript-eslint/parser&quot;: &quot;^2.27.0&quot;,
191    &quot;@typescript-eslint/typescript-estree&quot;: &quot;^4.15.2&quot;,
192    &quot;eslint-config-prettier&quot;: &quot;^6.10.1&quot;,
193    &quot;eslint-plugin-prettier&quot;: &quot;^3.1.2&quot;,
194    &quot;husky&quot;: &quot;^4.2.5&quot;,
195    &quot;lint-staged&quot;: &quot;^10.1.3&quot;,
196    &quot;prettier&quot;: &quot;^1.19.1&quot;,
197    &quot;react-test-renderer&quot;: &quot;^16.13.1&quot;,
198    &quot;redux-devtools-extension&quot;: &quot;^2.13.8&quot;,
199    &quot;redux-mock-store&quot;: &quot;^1.5.4&quot;
200  },
201  &quot;scripts&quot;: {
202    &quot;start&quot;: &quot;react-scripts start&quot;,
203    &quot;build&quot;: &quot;react-scripts build &amp;&amp; mv build ./deploy/build&quot;,
204    &quot;build-local&quot;: &quot;react-scripts build&quot;,
205    &quot;test&quot;: &quot;react-scripts test&quot;,
206    &quot;eject&quot;: &quot;react-scripts eject&quot;
207  },
208  &quot;eslintConfig&quot;: {
209    &quot;extends&quot;: &quot;react-app&quot;
210  },
211  &quot;husky&quot;: {
212    &quot;hooks&quot;: {
213      &quot;pre-commit&quot;: &quot;lint-staged&quot;
214    }
215  },
216  &quot;lint-staged&quot;: {
217    &quot;*.{js,ts,tsx}&quot;: [
218      &quot;eslint --fix&quot;
219    ]
220  },
221  &quot;browserslist&quot;: {
222    &quot;production&quot;: [
223      &quot;&gt;0.2%&quot;,
224      &quot;not dead&quot;,
225      &quot;not op_mini all&quot;
226    ],
227    &quot;development&quot;: [
228      &quot;last 1 chrome version&quot;,
229      &quot;last 1 firefox version&quot;,
230      &quot;last 1 safari version&quot;
231    ]
232  }
233}
234    - name: Fix up git URLs
235      run: echo -e '[url &quot;https://github.com/&quot;]\n  insteadOf = &quot;git://github.com/&quot;' &gt;&gt; ~/.gitconfig
236git config --global url.&quot;https://github.com/&quot;.insteadOf git://github.com/
237

You can also use SSH, but GitHub Security reminds us that, as of March 15th, 2022, GitHub stopped accepting DSA keys. RSA keys uploaded after Nov 2, 2021 will work only with SHA-2 signatures.
The deprecated MACs, ciphers, and unencrypted Git protocol are permanently disabled.

So this (with the right key) would work:

1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error: 
6  The unauthenticated git protocol on port 9418 is no longer supported.
7    - name: Installing modules
8      run: yarn install
9  steps:
10  - name: Checkout
11    uses: actions/checkout@v2
12
13  - id: vars
14    run: |
15      if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo &quot;::set-output name=environment::prod_stackstream&quot; ; echo &quot;::set-output name=api-url::api&quot; ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo &quot;::set-output name=environment::staging_stackstream&quot;  ; echo &quot;::set-output name=api-url::stagingapi&quot; ; else echo &quot;::set-output name=environment::dev_stackstream&quot; ; echo &quot;::set-output name=api-url::devapi&quot; ; fi
16
17  - uses: pCYSl5EDgo/cat@master
18    id: slack
19    with:
20      path: .github/workflows/slack.txt
21
22  - name: Slack Start Notification
23    uses: 8398a7/action-slack@v3
24    env:
25      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
26      ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
27      COLOR: good
28      STATUS: '`Started`'
29    with:
30      status: custom
31      fields: workflow,job,commit,repo,ref,author,took
32      custom_payload: |
33        ${{ steps.slack.outputs.text }}
34
35  - name: Installing modules
36    env:
37      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
38    run: yarn install
39
40  - name: Create Frontend Build
41    env:
42      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
43    run: yarn build
44
45  - name: Deploy to Frontend Server DEV
46    if: ${{ contains(github.ref, 'dev') }}
47    uses: easingthemes/ssh-deploy@v2.1.5
48    env:
49      SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
50      ARGS: '-rltgoDzvO --delete'
51      SOURCE: 'deploy/'
52      REMOTE_HOST: ${{ secrets.DEV_HOST }}
53      REMOTE_USER: plyfolio-dev
54      TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
55   {
56  &quot;name&quot;: &quot;stackstream-fe&quot;,
57  &quot;version&quot;: &quot;1.0.0&quot;,
58  &quot;authors&quot;: [
59    &quot;fayyaznofal@gmail.com&quot;
60  ],
61  &quot;private&quot;: true,
62  &quot;dependencies&quot;: {
63    &quot;@fortawesome/fontawesome-svg-core&quot;: &quot;^1.2.34&quot;,
64    &quot;@fortawesome/free-solid-svg-icons&quot;: &quot;^5.15.2&quot;,
65    &quot;@fortawesome/react-fontawesome&quot;: &quot;^0.1.14&quot;,
66    &quot;@fullcalendar/bootstrap&quot;: &quot;^5.5.0&quot;,
67    &quot;@fullcalendar/core&quot;: &quot;^5.5.0&quot;,
68    &quot;@fullcalendar/daygrid&quot;: &quot;^5.5.0&quot;,
69    &quot;@fullcalendar/interaction&quot;: &quot;^5.5.0&quot;,
70    &quot;@fullcalendar/react&quot;: &quot;^5.5.0&quot;,
71    &quot;@lourenci/react-kanban&quot;: &quot;^2.1.0&quot;,
72    &quot;@redux-saga/simple-saga-monitor&quot;: &quot;^1.1.2&quot;,
73    &quot;@testing-library/jest-dom&quot;: &quot;^5.11.9&quot;,
74    &quot;@testing-library/react&quot;: &quot;^11.2.3&quot;,
75    &quot;@testing-library/user-event&quot;: &quot;^12.6.0&quot;,
76    &quot;@toast-ui/react-chart&quot;: &quot;^1.0.2&quot;,
77    &quot;@types/jest&quot;: &quot;^26.0.14&quot;,
78    &quot;@types/node&quot;: &quot;^14.10.3&quot;,
79    &quot;@types/react&quot;: &quot;^16.9.49&quot;,
80    &quot;@types/react-dom&quot;: &quot;^16.9.8&quot;,
81    &quot;@vtaits/react-color-picker&quot;: &quot;^0.1.1&quot;,
82    &quot;apexcharts&quot;: &quot;^3.23.1&quot;,
83    &quot;availity-reactstrap-validation&quot;: &quot;^2.7.0&quot;,
84    &quot;axios&quot;: &quot;^0.21.1&quot;,
85    &quot;axios-mock-adapter&quot;: &quot;^1.19.0&quot;,
86    &quot;axios-progress-bar&quot;: &quot;^1.2.0&quot;,
87    &quot;bootstrap&quot;: &quot;^5.0.0-beta2&quot;,
88    &quot;chart.js&quot;: &quot;^2.9.4&quot;,
89    &quot;chartist&quot;: &quot;^0.11.4&quot;,
90    &quot;classnames&quot;: &quot;^2.2.6&quot;,
91    &quot;components&quot;: &quot;^0.1.0&quot;,
92    &quot;dotenv&quot;: &quot;^8.2.0&quot;,
93    &quot;draft-js&quot;: &quot;^0.11.7&quot;,
94    &quot;echarts&quot;: &quot;^4.9.0&quot;,
95    &quot;echarts-for-react&quot;: &quot;^2.0.16&quot;,
96    &quot;firebase&quot;: &quot;^8.2.3&quot;,
97    &quot;google-maps-react&quot;: &quot;^2.0.6&quot;,
98    &quot;history&quot;: &quot;^4.10.1&quot;,
99    &quot;i&quot;: &quot;^0.3.6&quot;,
100    &quot;i18next&quot;: &quot;^19.8.4&quot;,
101    &quot;i18next-browser-languagedetector&quot;: &quot;^6.0.1&quot;,
102    &quot;jsonwebtoken&quot;: &quot;^8.5.1&quot;,
103    &quot;leaflet&quot;: &quot;^1.7.1&quot;,
104    &quot;lodash&quot;: &quot;^4.17.21&quot;,
105    &quot;lodash.clonedeep&quot;: &quot;^4.5.0&quot;,
106    &quot;lodash.get&quot;: &quot;^4.4.2&quot;,
107    &quot;metismenujs&quot;: &quot;^1.2.1&quot;,
108    &quot;mkdirp&quot;: &quot;^1.0.4&quot;,
109    &quot;moment&quot;: &quot;2.29.1&quot;,
110    &quot;moment-timezone&quot;: &quot;^0.5.32&quot;,
111    &quot;nouislider-react&quot;: &quot;^3.3.9&quot;,
112    &quot;npm&quot;: &quot;^7.6.3&quot;,
113    &quot;prop-types&quot;: &quot;^15.7.2&quot;,
114    &quot;query-string&quot;: &quot;^6.14.0&quot;,
115    &quot;react&quot;: &quot;^16.13.1&quot;,
116    &quot;react-apexcharts&quot;: &quot;^1.3.7&quot;,
117    &quot;react-auth-code-input&quot;: &quot;^1.0.0&quot;,
118    &quot;react-avatar&quot;: &quot;^3.10.0&quot;,
119    &quot;react-bootstrap&quot;: &quot;^1.5.0&quot;,
120    &quot;react-bootstrap-editable&quot;: &quot;^0.8.2&quot;,
121    &quot;react-bootstrap-sweetalert&quot;: &quot;^5.2.0&quot;,
122    &quot;react-bootstrap-table-next&quot;: &quot;^4.0.3&quot;,
123    &quot;react-bootstrap-table2-editor&quot;: &quot;^1.4.0&quot;,
124    &quot;react-bootstrap-table2-paginator&quot;: &quot;^2.1.2&quot;,
125    &quot;react-bootstrap-table2-toolkit&quot;: &quot;^2.1.3&quot;,
126    &quot;react-chartist&quot;: &quot;^0.14.3&quot;,
127    &quot;react-chartjs-2&quot;: &quot;^2.11.1&quot;,
128    &quot;react-color&quot;: &quot;^2.19.3&quot;,
129    &quot;react-confirm-alert&quot;: &quot;^2.7.0&quot;,
130    &quot;react-content-loader&quot;: &quot;^6.0.1&quot;,
131    &quot;react-countdown&quot;: &quot;^2.3.1&quot;,
132    &quot;react-countup&quot;: &quot;^4.3.3&quot;,
133    &quot;react-cropper&quot;: &quot;^2.1.4&quot;,
134    &quot;react-data-table-component&quot;: &quot;^6.11.8&quot;,
135    &quot;react-date-picker&quot;: &quot;^8.0.6&quot;,
136    &quot;react-datepicker&quot;: &quot;^3.4.1&quot;,
137    &quot;react-dom&quot;: &quot;^16.13.1&quot;,
138    &quot;react-draft-wysiwyg&quot;: &quot;^1.14.5&quot;,
139    &quot;react-drag-listview&quot;: &quot;^0.1.8&quot;,
140    &quot;react-drawer&quot;: &quot;^1.3.4&quot;,
141    &quot;react-dropzone&quot;: &quot;^11.2.4&quot;,
142    &quot;react-dual-listbox&quot;: &quot;^2.0.0&quot;,
143    &quot;react-facebook-login&quot;: &quot;^4.1.1&quot;,
144    &quot;react-flatpickr&quot;: &quot;^3.10.6&quot;,
145    &quot;react-google-login&quot;: &quot;^5.2.2&quot;,
146    &quot;react-hook-form&quot;: &quot;^7.15.2&quot;,
147    &quot;react-i18next&quot;: &quot;^11.8.5&quot;,
148    &quot;react-icons&quot;: &quot;^4.2.0&quot;,
149    &quot;react-image-lightbox&quot;: &quot;^5.1.1&quot;,
150    &quot;react-input-mask&quot;: &quot;^2.0.4&quot;,
151    &quot;react-jvectormap&quot;: &quot;^0.0.16&quot;,
152    &quot;react-leaflet&quot;: &quot;^3.0.5&quot;,
153    &quot;react-meta-tags&quot;: &quot;^1.0.1&quot;,
154    &quot;react-modal-video&quot;: &quot;^1.2.6&quot;,
155    &quot;react-notifications&quot;: &quot;^1.7.2&quot;,
156    &quot;react-number-format&quot;: &quot;^4.7.3&quot;,
157    &quot;react-perfect-scrollbar&quot;: &quot;^1.5.8&quot;,
158    &quot;react-rangeslider&quot;: &quot;^2.2.0&quot;,
159    &quot;react-rating&quot;: &quot;^2.0.5&quot;,
160    &quot;react-rating-tooltip&quot;: &quot;^1.1.6&quot;,
161    &quot;react-redux&quot;: &quot;^7.2.1&quot;,
162    &quot;react-responsive-carousel&quot;: &quot;^3.2.11&quot;,
163    &quot;react-router-dom&quot;: &quot;^5.2.0&quot;,
164    &quot;react-script&quot;: &quot;^2.0.5&quot;,
165    &quot;react-scripts&quot;: &quot;3.4.3&quot;,
166    &quot;react-select&quot;: &quot;^4.3.1&quot;,
167    &quot;react-sparklines&quot;: &quot;^1.7.0&quot;,
168    &quot;react-star-ratings&quot;: &quot;^2.3.0&quot;,
169    &quot;react-super-responsive-table&quot;: &quot;^5.2.0&quot;,
170    &quot;react-switch&quot;: &quot;^6.0.0&quot;,
171    &quot;react-table&quot;: &quot;^7.6.3&quot;,
172    &quot;react-toastify&quot;: &quot;^7.0.3&quot;,
173    &quot;react-toastr&quot;: &quot;^3.0.0&quot;,
174    &quot;react-twitter-auth&quot;: &quot;0.0.13&quot;,
175    &quot;reactstrap&quot;: &quot;^8.8.1&quot;,
176    &quot;recharts&quot;: &quot;^2.0.8&quot;,
177    &quot;redux&quot;: &quot;^4.0.5&quot;,
178    &quot;redux-saga&quot;: &quot;^1.1.3&quot;,
179    &quot;reselect&quot;: &quot;^4.0.0&quot;,
180    &quot;sass&quot;: &quot;^1.37.5&quot;,
181    &quot;simplebar-react&quot;: &quot;^2.3.0&quot;,
182    &quot;styled&quot;: &quot;^1.0.0&quot;,
183    &quot;styled-components&quot;: &quot;^5.2.1&quot;,
184    &quot;toastr&quot;: &quot;^2.1.4&quot;,
185    &quot;typescript&quot;: &quot;^4.0.2&quot;,
186    &quot;universal-cookie&quot;: &quot;^4.0.4&quot;
187  },
188  &quot;devDependencies&quot;: {
189    &quot;@typescript-eslint/eslint-plugin&quot;: &quot;^2.27.0&quot;,
190    &quot;@typescript-eslint/parser&quot;: &quot;^2.27.0&quot;,
191    &quot;@typescript-eslint/typescript-estree&quot;: &quot;^4.15.2&quot;,
192    &quot;eslint-config-prettier&quot;: &quot;^6.10.1&quot;,
193    &quot;eslint-plugin-prettier&quot;: &quot;^3.1.2&quot;,
194    &quot;husky&quot;: &quot;^4.2.5&quot;,
195    &quot;lint-staged&quot;: &quot;^10.1.3&quot;,
196    &quot;prettier&quot;: &quot;^1.19.1&quot;,
197    &quot;react-test-renderer&quot;: &quot;^16.13.1&quot;,
198    &quot;redux-devtools-extension&quot;: &quot;^2.13.8&quot;,
199    &quot;redux-mock-store&quot;: &quot;^1.5.4&quot;
200  },
201  &quot;scripts&quot;: {
202    &quot;start&quot;: &quot;react-scripts start&quot;,
203    &quot;build&quot;: &quot;react-scripts build &amp;&amp; mv build ./deploy/build&quot;,
204    &quot;build-local&quot;: &quot;react-scripts build&quot;,
205    &quot;test&quot;: &quot;react-scripts test&quot;,
206    &quot;eject&quot;: &quot;react-scripts eject&quot;
207  },
208  &quot;eslintConfig&quot;: {
209    &quot;extends&quot;: &quot;react-app&quot;
210  },
211  &quot;husky&quot;: {
212    &quot;hooks&quot;: {
213      &quot;pre-commit&quot;: &quot;lint-staged&quot;
214    }
215  },
216  &quot;lint-staged&quot;: {
217    &quot;*.{js,ts,tsx}&quot;: [
218      &quot;eslint --fix&quot;
219    ]
220  },
221  &quot;browserslist&quot;: {
222    &quot;production&quot;: [
223      &quot;&gt;0.2%&quot;,
224      &quot;not dead&quot;,
225      &quot;not op_mini all&quot;
226    ],
227    &quot;development&quot;: [
228      &quot;last 1 chrome version&quot;,
229      &quot;last 1 firefox version&quot;,
230      &quot;last 1 safari version&quot;
231    ]
232  }
233}
234    - name: Fix up git URLs
235      run: echo -e '[url &quot;https://github.com/&quot;]\n  insteadOf = &quot;git://github.com/&quot;' &gt;&gt; ~/.gitconfig
236git config --global url.&quot;https://github.com/&quot;.insteadOf git://github.com/
237git config --global url.&quot;git@github.com:&quot;.insteadOf git://github.com/
238

That will change any git://github.com/ (unencrypted Git protocol) into git@github.com: (SSH URL).

Source https://stackoverflow.com/questions/70663523

QUESTION

react-chartjs-2 with chartJs 3: Error &quot;arc&quot; is not a registered element

Asked 2022-Mar-09 at 11:20

I am working on a React app where i want to display charts. I tried to use react-chartjs-2 but i can't find a way to make it work. when i try to use Pie component, I get the error: Error: "arc" is not a registered element.

I did a very simple react app:

  • npx create-react-app my-app
  • npm install --save react-chartjs-2 chart.js

Here is my package.json:

1{
2  &quot;name&quot;: &quot;my-app&quot;,
3  &quot;version&quot;: &quot;0.1.0&quot;,
4  &quot;private&quot;: true,
5  &quot;dependencies&quot;: {
6    &quot;chart.js&quot;: &quot;^3.6.0&quot;,
7    &quot;cra-template&quot;: &quot;1.1.2&quot;,
8    &quot;react&quot;: &quot;^17.0.2&quot;,
9    &quot;react-chartjs-2&quot;: &quot;^4.0.0&quot;,
10    &quot;react-dom&quot;: &quot;^17.0.2&quot;,
11    &quot;react-scripts&quot;: &quot;4.0.3&quot;
12  },
13  &quot;scripts&quot;: {
14    &quot;start&quot;: &quot;react-scripts start&quot;,
15    &quot;build&quot;: &quot;react-scripts build&quot;,
16    &quot;test&quot;: &quot;react-scripts test&quot;,
17    &quot;eject&quot;: &quot;react-scripts eject&quot;
18  },
19  &quot;browserslist&quot;: {
20    &quot;production&quot;: [
21      &quot;&gt;0.2%&quot;,
22      &quot;not dead&quot;,
23      &quot;not op_mini all&quot;
24    ],
25    &quot;development&quot;: [
26      &quot;last 1 chrome version&quot;,
27      &quot;last 1 firefox version&quot;,
28      &quot;last 1 safari version&quot;
29    ]
30  }
31}
32

And here is my App.js file:

1{
2  &quot;name&quot;: &quot;my-app&quot;,
3  &quot;version&quot;: &quot;0.1.0&quot;,
4  &quot;private&quot;: true,
5  &quot;dependencies&quot;: {
6    &quot;chart.js&quot;: &quot;^3.6.0&quot;,
7    &quot;cra-template&quot;: &quot;1.1.2&quot;,
8    &quot;react&quot;: &quot;^17.0.2&quot;,
9    &quot;react-chartjs-2&quot;: &quot;^4.0.0&quot;,
10    &quot;react-dom&quot;: &quot;^17.0.2&quot;,
11    &quot;react-scripts&quot;: &quot;4.0.3&quot;
12  },
13  &quot;scripts&quot;: {
14    &quot;start&quot;: &quot;react-scripts start&quot;,
15    &quot;build&quot;: &quot;react-scripts build&quot;,
16    &quot;test&quot;: &quot;react-scripts test&quot;,
17    &quot;eject&quot;: &quot;react-scripts eject&quot;
18  },
19  &quot;browserslist&quot;: {
20    &quot;production&quot;: [
21      &quot;&gt;0.2%&quot;,
22      &quot;not dead&quot;,
23      &quot;not op_mini all&quot;
24    ],
25    &quot;development&quot;: [
26      &quot;last 1 chrome version&quot;,
27      &quot;last 1 firefox version&quot;,
28      &quot;last 1 safari version&quot;
29    ]
30  }
31}
32import React from 'react'
33import { Pie } from 'react-chartjs-2'
34
35const BarChart = () =&gt; {
36  return (
37    &lt;Pie
38      data={{
39        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
40        datasets: [
41          {
42            label: '# of votes',
43            data: [12, 19, 3, 5, 2, 3],
44          },
45        ],
46      }}
47      height={400}
48      width={600}
49    /&gt;
50  )
51}
52
53const App = () =&gt; {
54  return (
55    &lt;div&gt;
56      &lt;BarChart /&gt;
57    &lt;/div&gt;
58  )
59}
60
61export default App
62

I also tried to follow this toturial: https://www.youtube.com/watch?v=c_9c5zkfQ3Y&ab_channel=WornOffKeys

He uses an older version of charJs and react-chartjs-2. And when i replace my versions of react-chartjs-2 and chartjs it works on my app.

1{
2  &quot;name&quot;: &quot;my-app&quot;,
3  &quot;version&quot;: &quot;0.1.0&quot;,
4  &quot;private&quot;: true,
5  &quot;dependencies&quot;: {
6    &quot;chart.js&quot;: &quot;^3.6.0&quot;,
7    &quot;cra-template&quot;: &quot;1.1.2&quot;,
8    &quot;react&quot;: &quot;^17.0.2&quot;,
9    &quot;react-chartjs-2&quot;: &quot;^4.0.0&quot;,
10    &quot;react-dom&quot;: &quot;^17.0.2&quot;,
11    &quot;react-scripts&quot;: &quot;4.0.3&quot;
12  },
13  &quot;scripts&quot;: {
14    &quot;start&quot;: &quot;react-scripts start&quot;,
15    &quot;build&quot;: &quot;react-scripts build&quot;,
16    &quot;test&quot;: &quot;react-scripts test&quot;,
17    &quot;eject&quot;: &quot;react-scripts eject&quot;
18  },
19  &quot;browserslist&quot;: {
20    &quot;production&quot;: [
21      &quot;&gt;0.2%&quot;,
22      &quot;not dead&quot;,
23      &quot;not op_mini all&quot;
24    ],
25    &quot;development&quot;: [
26      &quot;last 1 chrome version&quot;,
27      &quot;last 1 firefox version&quot;,
28      &quot;last 1 safari version&quot;
29    ]
30  }
31}
32import React from 'react'
33import { Pie } from 'react-chartjs-2'
34
35const BarChart = () =&gt; {
36  return (
37    &lt;Pie
38      data={{
39        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
40        datasets: [
41          {
42            label: '# of votes',
43            data: [12, 19, 3, 5, 2, 3],
44          },
45        ],
46      }}
47      height={400}
48      width={600}
49    /&gt;
50  )
51}
52
53const App = () =&gt; {
54  return (
55    &lt;div&gt;
56      &lt;BarChart /&gt;
57    &lt;/div&gt;
58  )
59}
60
61export default App
62&quot;chart.js&quot;: &quot;^2.9.4&quot;,
63&quot;react-chartjs-2&quot;: &quot;^2.10.0&quot;,
64

Do anyone one know how to solve the error i have (without having to keep old versions of chartJs and react-chartjs-2) ?

ANSWER

Answered 2021-Nov-24 at 15:13

Chart.js is treeshakable since chart.js V3 so you will need to import and register all elements you are using.

1{
2  &quot;name&quot;: &quot;my-app&quot;,
3  &quot;version&quot;: &quot;0.1.0&quot;,
4  &quot;private&quot;: true,
5  &quot;dependencies&quot;: {
6    &quot;chart.js&quot;: &quot;^3.6.0&quot;,
7    &quot;cra-template&quot;: &quot;1.1.2&quot;,
8    &quot;react&quot;: &quot;^17.0.2&quot;,
9    &quot;react-chartjs-2&quot;: &quot;^4.0.0&quot;,
10    &quot;react-dom&quot;: &quot;^17.0.2&quot;,
11    &quot;react-scripts&quot;: &quot;4.0.3&quot;
12  },
13  &quot;scripts&quot;: {
14    &quot;start&quot;: &quot;react-scripts start&quot;,
15    &quot;build&quot;: &quot;react-scripts build&quot;,
16    &quot;test&quot;: &quot;react-scripts test&quot;,
17    &quot;eject&quot;: &quot;react-scripts eject&quot;
18  },
19  &quot;browserslist&quot;: {
20    &quot;production&quot;: [
21      &quot;&gt;0.2%&quot;,
22      &quot;not dead&quot;,
23      &quot;not op_mini all&quot;
24    ],
25    &quot;development&quot;: [
26      &quot;last 1 chrome version&quot;,
27      &quot;last 1 firefox version&quot;,
28      &quot;last 1 safari version&quot;
29    ]
30  }
31}
32import React from 'react'
33import { Pie } from 'react-chartjs-2'
34
35const BarChart = () =&gt; {
36  return (
37    &lt;Pie
38      data={{
39        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
40        datasets: [
41          {
42            label: '# of votes',
43            data: [12, 19, 3, 5, 2, 3],
44          },
45        ],
46      }}
47      height={400}
48      width={600}
49    /&gt;
50  )
51}
52
53const App = () =&gt; {
54  return (
55    &lt;div&gt;
56      &lt;BarChart /&gt;
57    &lt;/div&gt;
58  )
59}
60
61export default App
62&quot;chart.js&quot;: &quot;^2.9.4&quot;,
63&quot;react-chartjs-2&quot;: &quot;^2.10.0&quot;,
64import {Chart, ArcElement} from 'chart.js'
65Chart.register(ArcElement);
66

For all available imports and ways of registering the components you can read the normal chart.js documentation

Source https://stackoverflow.com/questions/70098392

QUESTION

Plotly Python update figure with dropMenu

Asked 2022-Feb-18 at 19:54

i am currently working with plotly i have a function called plotChart that takes a dataframe as input and plots a candlestick chart. I am trying to figure out a way to pass a list of dataframes to the function plotChart and use a plotly dropdown menu to show the options on the input list by the stock name. The drop down menu will have the list of dataframe and when an option is clicked on it will update the figure in plotly is there away to do this. below is the code i have to plot a single dataframe

1def make_multi_plot(df):
2    
3    fig = make_subplots(rows=2, cols=2,
4                        shared_xaxes=True,
5                        vertical_spacing=0.03,
6                        subplot_titles=('OHLC', 'Volume Profile'),
7                        row_width=[0.2, 0.7])
8
9    for s in df.name.unique():
10        
11        trace1 = go.Candlestick(
12            x=df.loc[df.name.isin([s])].time,
13            open=df.loc[df.name.isin([s])].open,
14            high=df.loc[df.name.isin([s])].high,
15            low=df.loc[df.name.isin([s])].low,
16            close=df.loc[df.name.isin([s])].close,
17            name = s)
18        fig.append_trace(trace1,1,1)
19        
20        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].BbandsMid, mode='lines',name='MidBollinger'),1,1)
21        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].BbandsUpp, mode='lines',name='UpperBollinger'),1,1)
22        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].BbandsLow, mode='lines',name='LowerBollinger'),1,1)
23        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].vwap, mode='lines',name='VWAP'),1,1)
24        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].STDEV_1, mode='lines',name='UPPERVWAP'),1,1)
25        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].STDEV_N1, mode='lines',name='LOWERVWAP'),1,1)
26        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].KcMid, mode='lines',name='KcMid'),1,1)
27        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].KcUpper, mode='lines',name='KcUpper'),1,1)
28        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].KcLow, mode='lines',name='KcLow'),1,1)
29        
30
31        trace2 = go.Bar(
32                x=df.loc[df.name.isin([s])].time,
33                y=df.loc[df.name.isin([s])].volume,
34                name = s)
35        fig.append_trace(trace2,2,1)
36        # fig.update_layout(title_text=s)
37        
38        
39        
40    graph_cnt=len(fig.data)
41
42        
43    tr = 11
44    symbol_cnt =len(df.name.unique())
45    for g in range(tr, graph_cnt):
46        fig.update_traces(visible=False, selector=g)
47        #print(g)
48    def create_layout_button(k, symbol):
49        
50        start, end = tr*k, tr*k+2
51        visibility = [False]*tr*symbol_cnt
52        visibility[start:end] = [True,True,True,True,True,True,True,True,True,True,True]
53        return dict(label = symbol,
54                    method = 'restyle',
55                    args = [{'visible': visibility[:-1],
56                             'title': symbol,
57                             'showlegend': False}])    
58    
59    fig.update(layout_xaxis_rangeslider_visible=False)
60    fig.update_layout(
61        updatemenus=[go.layout.Updatemenu(
62            active = 0,
63            buttons = [create_layout_button(k, s) for k, s in enumerate(df.name.unique())]
64            )
65        ])
66    
67    fig.show()
68

i am trying to add annotations to the figure it will be different for each chart below is how i had it setup for the single chart df['superTrend'] is a Boolean column

1def make_multi_plot(df):
2    
3    fig = make_subplots(rows=2, cols=2,
4                        shared_xaxes=True,
5                        vertical_spacing=0.03,
6                        subplot_titles=('OHLC', 'Volume Profile'),
7                        row_width=[0.2, 0.7])
8
9    for s in df.name.unique():
10        
11        trace1 = go.Candlestick(
12            x=df.loc[df.name.isin([s])].time,
13            open=df.loc[df.name.isin([s])].open,
14            high=df.loc[df.name.isin([s])].high,
15            low=df.loc[df.name.isin([s])].low,
16            close=df.loc[df.name.isin([s])].close,
17            name = s)
18        fig.append_trace(trace1,1,1)
19        
20        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].BbandsMid, mode='lines',name='MidBollinger'),1,1)
21        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].BbandsUpp, mode='lines',name='UpperBollinger'),1,1)
22        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].BbandsLow, mode='lines',name='LowerBollinger'),1,1)
23        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].vwap, mode='lines',name='VWAP'),1,1)
24        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].STDEV_1, mode='lines',name='UPPERVWAP'),1,1)
25        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].STDEV_N1, mode='lines',name='LOWERVWAP'),1,1)
26        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].KcMid, mode='lines',name='KcMid'),1,1)
27        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].KcUpper, mode='lines',name='KcUpper'),1,1)
28        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].KcLow, mode='lines',name='KcLow'),1,1)
29        
30
31        trace2 = go.Bar(
32                x=df.loc[df.name.isin([s])].time,
33                y=df.loc[df.name.isin([s])].volume,
34                name = s)
35        fig.append_trace(trace2,2,1)
36        # fig.update_layout(title_text=s)
37        
38        
39        
40    graph_cnt=len(fig.data)
41
42        
43    tr = 11
44    symbol_cnt =len(df.name.unique())
45    for g in range(tr, graph_cnt):
46        fig.update_traces(visible=False, selector=g)
47        #print(g)
48    def create_layout_button(k, symbol):
49        
50        start, end = tr*k, tr*k+2
51        visibility = [False]*tr*symbol_cnt
52        visibility[start:end] = [True,True,True,True,True,True,True,True,True,True,True]
53        return dict(label = symbol,
54                    method = 'restyle',
55                    args = [{'visible': visibility[:-1],
56                             'title': symbol,
57                             'showlegend': False}])    
58    
59    fig.update(layout_xaxis_rangeslider_visible=False)
60    fig.update_layout(
61        updatemenus=[go.layout.Updatemenu(
62            active = 0,
63            buttons = [create_layout_button(k, s) for k, s in enumerate(df.name.unique())]
64            )
65        ])
66    
67    fig.show()
68for i in range(df.first_valid_index()+1,len(df.index)):
69        prev = i - 1
70        if df['superTrend'][i] != df['superTrend'][prev] and not np.isnan(df['superTrend'][i]) :
71            #print(i,df['inUptrend'][i])
72            fig.add_annotation(x=df['time'][i], y=df['open'][i],
73            text= 'Buy' if df['superTrend'][i] else 'Sell',
74            showarrow=True,
75            arrowhead=6,
76            font=dict(
77                #family=&quot;Courier New, monospace&quot;,
78                size=20,
79                #color=&quot;#ffffff&quot;
80            ),)
81

ANSWER

Answered 2022-Feb-18 at 07:18

I adapted an example from the plotly community to your example and created the code. The point of creation is to create the data for each subplot and then switch between them by means of buttons. The sample data is created using representative companies of US stocks. one issue is that the title is set but not displayed. We are currently investigating this issue.

1def make_multi_plot(df):
2    
3    fig = make_subplots(rows=2, cols=2,
4                        shared_xaxes=True,
5                        vertical_spacing=0.03,
6                        subplot_titles=('OHLC', 'Volume Profile'),
7                        row_width=[0.2, 0.7])
8
9    for s in df.name.unique():
10        
11        trace1 = go.Candlestick(
12            x=df.loc[df.name.isin([s])].time,
13            open=df.loc[df.name.isin([s])].open,
14            high=df.loc[df.name.isin([s])].high,
15            low=df.loc[df.name.isin([s])].low,
16            close=df.loc[df.name.isin([s])].close,
17            name = s)
18        fig.append_trace(trace1,1,1)
19        
20        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].BbandsMid, mode='lines',name='MidBollinger'),1,1)
21        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].BbandsUpp, mode='lines',name='UpperBollinger'),1,1)
22        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].BbandsLow, mode='lines',name='LowerBollinger'),1,1)
23        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].vwap, mode='lines',name='VWAP'),1,1)
24        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].STDEV_1, mode='lines',name='UPPERVWAP'),1,1)
25        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].STDEV_N1, mode='lines',name='LOWERVWAP'),1,1)
26        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].KcMid, mode='lines',name='KcMid'),1,1)
27        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].KcUpper, mode='lines',name='KcUpper'),1,1)
28        fig.append_trace(go.Scatter(x=df.loc[df.name.isin([s])].time, y=df.loc[df.name.isin([s])].KcLow, mode='lines',name='KcLow'),1,1)
29        
30
31        trace2 = go.Bar(
32                x=df.loc[df.name.isin([s])].time,
33                y=df.loc[df.name.isin([s])].volume,
34                name = s)
35        fig.append_trace(trace2,2,1)
36        # fig.update_layout(title_text=s)
37        
38        
39        
40    graph_cnt=len(fig.data)
41
42        
43    tr = 11
44    symbol_cnt =len(df.name.unique())
45    for g in range(tr, graph_cnt):
46        fig.update_traces(visible=False, selector=g)
47        #print(g)
48    def create_layout_button(k, symbol):
49        
50        start, end = tr*k, tr*k+2
51        visibility = [False]*tr*symbol_cnt
52        visibility[start:end] = [True,True,True,True,True,True,True,True,True,True,True]
53        return dict(label = symbol,
54                    method = 'restyle',
55                    args = [{'visible': visibility[:-1],
56                             'title': symbol,
57                             'showlegend': False}])    
58    
59    fig.update(layout_xaxis_rangeslider_visible=False)
60    fig.update_layout(
61        updatemenus=[go.layout.Updatemenu(
62            active = 0,
63            buttons = [create_layout_button(k, s) for k, s in enumerate(df.name.unique())]
64            )
65        ])
66    
67    fig.show()
68for i in range(df.first_valid_index()+1,len(df.index)):
69        prev = i - 1
70        if df['superTrend'][i] != df['superTrend'][prev] and not np.isnan(df['superTrend'][i]) :
71            #print(i,df['inUptrend'][i])
72            fig.add_annotation(x=df['time'][i], y=df['open'][i],
73            text= 'Buy' if df['superTrend'][i] else 'Sell',
74            showarrow=True,
75            arrowhead=6,
76            font=dict(
77                #family=&quot;Courier New, monospace&quot;,
78                size=20,
79                #color=&quot;#ffffff&quot;
80            ),)
81import yfinance as yf
82import plotly.graph_objects as go
83from plotly.subplots import make_subplots
84import pandas as pd
85
86symbols = ['AAPL','GOOG','TSLA']
87stocks = pd.DataFrame()
88for s in symbols:
89    data = yf.download(s, start=&quot;2021-01-01&quot;, end=&quot;2021-12-31&quot;)
90    data['mean'] = data['Close'].rolling(20).mean()
91    data['std'] = data['Close'].rolling(20).std()
92    data['upperBand'] = data['mean'] + (data['std'] * 2)
93    data.reset_index(inplace=True)
94    data['symbol'] = s
95    stocks = stocks.append(data, ignore_index=True)
96
97def make_multi_plot(df):
98    
99    fig = make_subplots(rows=2, cols=1,
100                        shared_xaxes=True,
101                        vertical_spacing=0.03,
102                        subplot_titles=('OHLC', 'Volume Profile'),
103                        row_width=[0.2, 0.7])
104
105    for s in df.symbol.unique():
106        trace1 = go.Candlestick(
107            x=df.loc[df.symbol.isin([s])].Date,
108            open=df.loc[df.symbol.isin([s])].Open,
109            high=df.loc[df.symbol.isin([s])].High,
110            low=df.loc[df.symbol.isin([s])].Low,
111            close=df.loc[df.symbol.isin([s])].Close,
112            name=s)
113        fig.append_trace(trace1,1,1)
114        
115        trace2 = go.Scatter(
116            x=df.loc[df.symbol.isin([s])].Date,
117            y=df.loc[df.symbol.isin([s])].upperBand,
118            name=s)
119        fig.append_trace(trace2,1,1)
120        
121        trace3 = go.Bar(
122            x=df.loc[df.symbol.isin([s])].Date,
123            y=df.loc[df.symbol.isin([s])].Volume,
124            name=s)
125        fig.append_trace(trace3,2,1)
126        # fig.update_layout(title_text=s)
127    
128    # Calculate the total number of graphs
129    graph_cnt=len(fig.data)
130    # Number of Symbols
131    symbol_cnt =len(df.symbol.unique())
132    # Number of graphs per symbol
133    tr = 3
134    # Hide setting for initial display
135    for g in range(tr, graph_cnt): 
136        fig.update_traces(visible=False, selector=g)
137
138    def create_layout_button(k, symbol):
139        start, end = tr*k, tr*k+2
140        visibility = [False]*tr*symbol_cnt
141        # Number of graphs per symbol, so if you add a graph, add True.
142        visibility[start:end] = [True,True,True]
143        return dict(label = symbol,
144                    method = 'restyle',
145                    args = [{'visible': visibility[:-1],
146                             'title': symbol,
147                             'showlegend': True}])    
148    
149    fig.update(layout_xaxis_rangeslider_visible=False)
150    fig.update_layout(
151        updatemenus=[go.layout.Updatemenu(
152            active = 0,
153            buttons = [create_layout_button(k, s) for k, s in enumerate(df.symbol.unique())]
154            )
155        ])
156    
157    fig.show()
158    return fig.layout
159    
160make_multi_plot(stocks)
161

enter image description here

enter image description here

enter image description here

Source https://stackoverflow.com/questions/71121056

QUESTION

Why is SFINAE for one of the std::basic_string constructors so restrictive?

Asked 2022-Jan-28 at 12:53
Background

Discussion about this was started under this answer for quite simple question.

Problem

This simple code has unexpected overload resolution of constructor for std::basic_string:

1#include &lt;string&gt;
2
3int main() {
4    std::string s{&quot;some string to test&quot;, 2, 3};
5    return 0;
6}
7

Now someone was expecting that this will invoke this constructor:

std::basic_string<CharT,Traits,Allocator>::basic_string - cppreference.com

template< class T > basic_string( const T& t, size_type pos, size_type n, const Allocator& alloc = Allocator() ); (since C++17) (11)
template< class T > constexpr basic_string( const T& t, size_type pos, size_type const Allocator& alloc = Allocator() ); (since C++20) (11)

Rationale is based on section of this c++ standard:

[string.cons]

template<class T> constexpr basic_string(const T& t, size_type pos, size_type n, const Allocator& a = Allocator());

5 Constraints: is_­convertible_­v<const T&, basic_­string_­view<charT, traits>> is true.

6 Effects: Creates a variable, sv, as if by basic_­string_­view<charT, traits> sv = t; and then behaves the same as: basic_string(sv.substr(pos, n), a);

Now when this code is processed by cppinsights result is different then expected:

1#include &lt;string&gt;
2
3int main() {
4    std::string s{&quot;some string to test&quot;, 2, 3};
5    return 0;
6}
7#include &lt;string&gt;
8
9int main()
10{
11  std::string s = std::basic_string&lt;char&gt;{std::basic_string&lt;char&gt;(&quot;some string to test&quot;, std::allocator&lt;char&gt;()), 2, 3};
12  return 0;
13}
14

After collapsing this code to respective type definitions of std::string it becomes this:

1#include &lt;string&gt;
2
3int main() {
4    std::string s{&quot;some string to test&quot;, 2, 3};
5    return 0;
6}
7#include &lt;string&gt;
8
9int main()
10{
11  std::string s = std::basic_string&lt;char&gt;{std::basic_string&lt;char&gt;(&quot;some string to test&quot;, std::allocator&lt;char&gt;()), 2, 3};
12  return 0;
13}
14#include &lt;string&gt;
15
16int main()
17{
18  std::string s = std::string{std::string(&quot;some string to test&quot;), 2, 3};
19  return 0;
20}
21

So conversion of string literal to std::string was performed and then constructor in form (3) was used. So undesired extra allocation is performed.

I'm sure this is not fault of tool I did other experiments to confirm that. Here is a godbolt example. Assembly clearly follows this pattern.

Analysis

To find explanation of this problem I've introduced an error to this code, so error report prints possible overload resolutions. Here is most interesting part of error report:

1#include &lt;string&gt;
2
3int main() {
4    std::string s{&quot;some string to test&quot;, 2, 3};
5    return 0;
6}
7#include &lt;string&gt;
8
9int main()
10{
11  std::string s = std::basic_string&lt;char&gt;{std::basic_string&lt;char&gt;(&quot;some string to test&quot;, std::allocator&lt;char&gt;()), 2, 3};
12  return 0;
13}
14#include &lt;string&gt;
15
16int main()
17{
18  std::string s = std::string{std::string(&quot;some string to test&quot;), 2, 3};
19  return 0;
20}
21/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/bits/basic_string.h:771:9: note: candidate: 'template&lt;class _Tp, class&gt; std::__cxx11::basic_string&lt;_CharT, _Traits, _Alloc&gt;::basic_string(const _Tp&amp;, size_type, size_type, const _Alloc&amp;) [with &lt;template-parameter-2-2&gt; = _Tp; _CharT = char; _Traits = std::char_traits&lt;char&gt;; _Alloc = std::allocator&lt;char&gt;]'
22  771 |         basic_string(const _Tp&amp; __t, size_type __pos, size_type __n,
23      |         ^~~~~~~~~~~~
24/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/bits/basic_string.h:771:9: note:   template argument deduction/substitution failed:
25In file included from /opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/bits/char_traits.h:42,
26                 from /opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/string:40,
27                 from &lt;source&gt;:1:
28/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/type_traits: In substitution of 'template&lt;bool _Cond, class _Tp&gt; using enable_if_t = typename std::enable_if::type [with bool _Cond = false; _Tp = void]':
29/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/bits/basic_string.h:156:8:   required by substitution of 'template&lt;class _CharT, class _Traits, class _Alloc&gt; template&lt;class _Tp, class _Res&gt; using _If_sv = std::enable_if_t&lt;std::__and_&lt;std::is_convertible&lt;const _Tp&amp;, std::basic_string_view&lt;_CharT, _Traits&gt; &gt;, std::__not_&lt;std::is_convertible&lt;const _Tp*, const std::__cxx11::basic_string&lt;_CharT, _Traits, _Alloc&gt;*&gt; &gt;, std::__not_&lt;std::is_convertible&lt;const _Tp&amp;, const _CharT*&gt; &gt; &gt;::value, _Res&gt; [with _Tp = char [20]; _Res = void; _CharT = char; _Traits = std::char_traits&lt;char&gt;; _Alloc = std::allocator&lt;char&gt;]'
30/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/bits/basic_string.h:769:30:   required from here
31/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/type_traits:2614:11: error: no type named 'type' in 'struct std::enable_if&lt;false, void&gt;'
32 2614 |     using enable_if_t = typename enable_if&lt;_Cond, _Tp&gt;::type;
33      |           ^~~~~~~~~~~
34

So overload (11) has been rejected by SFINAE.

Related standard library code looks like this: Overload (11) of std::basic_string constructor:

1#include &lt;string&gt;
2
3int main() {
4    std::string s{&quot;some string to test&quot;, 2, 3};
5    return 0;
6}
7#include &lt;string&gt;
8
9int main()
10{
11  std::string s = std::basic_string&lt;char&gt;{std::basic_string&lt;char&gt;(&quot;some string to test&quot;, std::allocator&lt;char&gt;()), 2, 3};
12  return 0;
13}
14#include &lt;string&gt;
15
16int main()
17{
18  std::string s = std::string{std::string(&quot;some string to test&quot;), 2, 3};
19  return 0;
20}
21/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/bits/basic_string.h:771:9: note: candidate: 'template&lt;class _Tp, class&gt; std::__cxx11::basic_string&lt;_CharT, _Traits, _Alloc&gt;::basic_string(const _Tp&amp;, size_type, size_type, const _Alloc&amp;) [with &lt;template-parameter-2-2&gt; = _Tp; _CharT = char; _Traits = std::char_traits&lt;char&gt;; _Alloc = std::allocator&lt;char&gt;]'
22  771 |         basic_string(const _Tp&amp; __t, size_type __pos, size_type __n,
23      |         ^~~~~~~~~~~~
24/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/bits/basic_string.h:771:9: note:   template argument deduction/substitution failed:
25In file included from /opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/bits/char_traits.h:42,
26                 from /opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/string:40,
27                 from &lt;source&gt;:1:
28/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/type_traits: In substitution of 'template&lt;bool _Cond, class _Tp&gt; using enable_if_t = typename std::enable_if::type [with bool _Cond = false; _Tp = void]':
29/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/bits/basic_string.h:156:8:   required by substitution of 'template&lt;class _CharT, class _Traits, class _Alloc&gt; template&lt;class _Tp, class _Res&gt; using _If_sv = std::enable_if_t&lt;std::__and_&lt;std::is_convertible&lt;const _Tp&amp;, std::basic_string_view&lt;_CharT, _Traits&gt; &gt;, std::__not_&lt;std::is_convertible&lt;const _Tp*, const std::__cxx11::basic_string&lt;_CharT, _Traits, _Alloc&gt;*&gt; &gt;, std::__not_&lt;std::is_convertible&lt;const _Tp&amp;, const _CharT*&gt; &gt; &gt;::value, _Res&gt; [with _Tp = char [20]; _Res = void; _CharT = char; _Traits = std::char_traits&lt;char&gt;; _Alloc = std::allocator&lt;char&gt;]'
30/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/bits/basic_string.h:769:30:   required from here
31/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/type_traits:2614:11: error: no type named 'type' in 'struct std::enable_if&lt;false, void&gt;'
32 2614 |     using enable_if_t = typename enable_if&lt;_Cond, _Tp&gt;::type;
33      |           ^~~~~~~~~~~
34    template&lt;typename _Tp, typename = _If_sv&lt;_Tp, void&gt;&gt;
35    basic_string(const _Tp&amp; __t, size_type __pos, size_type __n,
36             const _Alloc&amp; __a = _Alloc())
37    : basic_string(_S_to_string_view(__t).substr(__pos, __n), __a) { }
38

And here is implementation of _If_sv:

1#include &lt;string&gt;
2
3int main() {
4    std::string s{&quot;some string to test&quot;, 2, 3};
5    return 0;
6}
7#include &lt;string&gt;
8
9int main()
10{
11  std::string s = std::basic_string&lt;char&gt;{std::basic_string&lt;char&gt;(&quot;some string to test&quot;, std::allocator&lt;char&gt;()), 2, 3};
12  return 0;
13}
14#include &lt;string&gt;
15
16int main()
17{
18  std::string s = std::string{std::string(&quot;some string to test&quot;), 2, 3};
19  return 0;
20}
21/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/bits/basic_string.h:771:9: note: candidate: 'template&lt;class _Tp, class&gt; std::__cxx11::basic_string&lt;_CharT, _Traits, _Alloc&gt;::basic_string(const _Tp&amp;, size_type, size_type, const _Alloc&amp;) [with &lt;template-parameter-2-2&gt; = _Tp; _CharT = char; _Traits = std::char_traits&lt;char&gt;; _Alloc = std::allocator&lt;char&gt;]'
22  771 |         basic_string(const _Tp&amp; __t, size_type __pos, size_type __n,
23      |         ^~~~~~~~~~~~
24/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/bits/basic_string.h:771:9: note:   template argument deduction/substitution failed:
25In file included from /opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/bits/char_traits.h:42,
26                 from /opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/string:40,
27                 from &lt;source&gt;:1:
28/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/type_traits: In substitution of 'template&lt;bool _Cond, class _Tp&gt; using enable_if_t = typename std::enable_if::type [with bool _Cond = false; _Tp = void]':
29/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/bits/basic_string.h:156:8:   required by substitution of 'template&lt;class _CharT, class _Traits, class _Alloc&gt; template&lt;class _Tp, class _Res&gt; using _If_sv = std::enable_if_t&lt;std::__and_&lt;std::is_convertible&lt;const _Tp&amp;, std::basic_string_view&lt;_CharT, _Traits&gt; &gt;, std::__not_&lt;std::is_convertible&lt;const _Tp*, const std::__cxx11::basic_string&lt;_CharT, _Traits, _Alloc&gt;*&gt; &gt;, std::__not_&lt;std::is_convertible&lt;const _Tp&amp;, const _CharT*&gt; &gt; &gt;::value, _Res&gt; [with _Tp = char [20]; _Res = void; _CharT = char; _Traits = std::char_traits&lt;char&gt;; _Alloc = std::allocator&lt;char&gt;]'
30/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/bits/basic_string.h:769:30:   required from here
31/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/type_traits:2614:11: error: no type named 'type' in 'struct std::enable_if&lt;false, void&gt;'
32 2614 |     using enable_if_t = typename enable_if&lt;_Cond, _Tp&gt;::type;
33      |           ^~~~~~~~~~~
34    template&lt;typename _Tp, typename = _If_sv&lt;_Tp, void&gt;&gt;
35    basic_string(const _Tp&amp; __t, size_type __pos, size_type __n,
36             const _Alloc&amp; __a = _Alloc())
37    : basic_string(_S_to_string_view(__t).substr(__pos, __n), __a) { }
38    template&lt;typename _Tp, typename _Res&gt;
39    using _If_sv = enable_if_t&lt;
40      __and_&lt;is_convertible&lt;const _Tp&amp;, __sv_type&gt;,
41         __not_&lt;is_convertible&lt;const _Tp*, const basic_string*&gt;&gt;,
42         __not_&lt;is_convertible&lt;const _Tp&amp;, const _CharT*&gt;&gt;&gt;::value,
43      _Res&gt;;
44

So last part of this condition: __not_<is_convertible<const _Tp&, const _CharT*>>>::value is a problem since clearly char array (string literal) is convertible to pointer to characters.

Question

Why does the implementation of _If_sv look like this? What is the rationale of having this extra condition which is not mentioned in the standard?

If I understand overload resolution correctly, this extra condition is obsolete, since when first argument is std::string overloads (3) has priority over overload (11) as exact match of non template function. On the other hand if an argument is something other than std::string and it is convertible to std::string_view then template overload (11) should win and extra allocation is avoided.

Is this a bug in the implementation of the standard library or did I miss something?

Why are these extra SFINAE conditions needed?

Bonus question

Is there a nice way to write a test which detects this issue? Some ways to verify that a proper overload has been selected without modifying tested code (in this case std::basic_string)?

ANSWER

Answered 2022-Jan-05 at 12:05

Maybe I'm wrong, but it seems that last part:

1#include &lt;string&gt;
2
3int main() {
4    std::string s{&quot;some string to test&quot;, 2, 3};
5    return 0;
6}
7#include &lt;string&gt;
8
9int main()
10{
11  std::string s = std::basic_string&lt;char&gt;{std::basic_string&lt;char&gt;(&quot;some string to test&quot;, std::allocator&lt;char&gt;()), 2, 3};
12  return 0;
13}
14#include &lt;string&gt;
15
16int main()
17{
18  std::string s = std::string{std::string(&quot;some string to test&quot;), 2, 3};
19  return 0;
20}
21/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/bits/basic_string.h:771:9: note: candidate: 'template&lt;class _Tp, class&gt; std::__cxx11::basic_string&lt;_CharT, _Traits, _Alloc&gt;::basic_string(const _Tp&amp;, size_type, size_type, const _Alloc&amp;) [with &lt;template-parameter-2-2&gt; = _Tp; _CharT = char; _Traits = std::char_traits&lt;char&gt;; _Alloc = std::allocator&lt;char&gt;]'
22  771 |         basic_string(const _Tp&amp; __t, size_type __pos, size_type __n,
23      |         ^~~~~~~~~~~~
24/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/bits/basic_string.h:771:9: note:   template argument deduction/substitution failed:
25In file included from /opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/bits/char_traits.h:42,
26                 from /opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/string:40,
27                 from &lt;source&gt;:1:
28/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/type_traits: In substitution of 'template&lt;bool _Cond, class _Tp&gt; using enable_if_t = typename std::enable_if::type [with bool _Cond = false; _Tp = void]':
29/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/bits/basic_string.h:156:8:   required by substitution of 'template&lt;class _CharT, class _Traits, class _Alloc&gt; template&lt;class _Tp, class _Res&gt; using _If_sv = std::enable_if_t&lt;std::__and_&lt;std::is_convertible&lt;const _Tp&amp;, std::basic_string_view&lt;_CharT, _Traits&gt; &gt;, std::__not_&lt;std::is_convertible&lt;const _Tp*, const std::__cxx11::basic_string&lt;_CharT, _Traits, _Alloc&gt;*&gt; &gt;, std::__not_&lt;std::is_convertible&lt;const _Tp&amp;, const _CharT*&gt; &gt; &gt;::value, _Res&gt; [with _Tp = char [20]; _Res = void; _CharT = char; _Traits = std::char_traits&lt;char&gt;; _Alloc = std::allocator&lt;char&gt;]'
30/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/bits/basic_string.h:769:30:   required from here
31/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/type_traits:2614:11: error: no type named 'type' in 'struct std::enable_if&lt;false, void&gt;'
32 2614 |     using enable_if_t = typename enable_if&lt;_Cond, _Tp&gt;::type;
33      |           ^~~~~~~~~~~
34    template&lt;typename _Tp, typename = _If_sv&lt;_Tp, void&gt;&gt;
35    basic_string(const _Tp&amp; __t, size_type __pos, size_type __n,
36             const _Alloc&amp; __a = _Alloc())
37    : basic_string(_S_to_string_view(__t).substr(__pos, __n), __a) { }
38    template&lt;typename _Tp, typename _Res&gt;
39    using _If_sv = enable_if_t&lt;
40      __and_&lt;is_convertible&lt;const _Tp&amp;, __sv_type&gt;,
41         __not_&lt;is_convertible&lt;const _Tp*, const basic_string*&gt;&gt;,
42         __not_&lt;is_convertible&lt;const _Tp&amp;, const _CharT*&gt;&gt;&gt;::value,
43      _Res&gt;;
44__not_&lt;is_convertible&lt;const _Tp&amp;, const _CharT*&gt;&gt;&gt;::value
45

is added to _If_sv for preventing ambiguity between these 2 constructors:

1#include &lt;string&gt;
2
3int main() {
4    std::string s{&quot;some string to test&quot;, 2, 3};
5    return 0;
6}
7#include &lt;string&gt;
8
9int main()
10{
11  std::string s = std::basic_string&lt;char&gt;{std::basic_string&lt;char&gt;(&quot;some string to test&quot;, std::allocator&lt;char&gt;()), 2, 3};
12  return 0;
13}
14#include &lt;string&gt;
15
16int main()
17{
18  std::string s = std::string{std::string(&quot;some string to test&quot;), 2, 3};
19  return 0;
20}
21/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/bits/basic_string.h:771:9: note: candidate: 'template&lt;class _Tp, class&gt; std::__cxx11::basic_string&lt;_CharT, _Traits, _Alloc&gt;::basic_string(const _Tp&amp;, size_type, size_type, const _Alloc&amp;) [with &lt;template-parameter-2-2&gt; = _Tp; _CharT = char; _Traits = std::char_traits&lt;char&gt;; _Alloc = std::allocator&lt;char&gt;]'
22  771 |         basic_string(const _Tp&amp; __t, size_type __pos, size_type __n,
23      |         ^~~~~~~~~~~~
24/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/bits/basic_string.h:771:9: note:   template argument deduction/substitution failed:
25In file included from /opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/bits/char_traits.h:42,
26                 from /opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/string:40,
27                 from &lt;source&gt;:1:
28/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/type_traits: In substitution of 'template&lt;bool _Cond, class _Tp&gt; using enable_if_t = typename std::enable_if::type [with bool _Cond = false; _Tp = void]':
29/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/bits/basic_string.h:156:8:   required by substitution of 'template&lt;class _CharT, class _Traits, class _Alloc&gt; template&lt;class _Tp, class _Res&gt; using _If_sv = std::enable_if_t&lt;std::__and_&lt;std::is_convertible&lt;const _Tp&amp;, std::basic_string_view&lt;_CharT, _Traits&gt; &gt;, std::__not_&lt;std::is_convertible&lt;const _Tp*, const std::__cxx11::basic_string&lt;_CharT, _Traits, _Alloc&gt;*&gt; &gt;, std::__not_&lt;std::is_convertible&lt;const _Tp&amp;, const _CharT*&gt; &gt; &gt;::value, _Res&gt; [with _Tp = char [20]; _Res = void; _CharT = char; _Traits = std::char_traits&lt;char&gt;; _Alloc = std::allocator&lt;char&gt;]'
30/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/bits/basic_string.h:769:30:   required from here
31/opt/compiler-explorer/gcc-trunk-20220104/include/c++/12.0.0/type_traits:2614:11: error: no type named 'type' in 'struct std::enable_if&lt;false, void&gt;'
32 2614 |     using enable_if_t = typename enable_if&lt;_Cond, _Tp&gt;::type;
33      |           ^~~~~~~~~~~
34    template&lt;typename _Tp, typename = _If_sv&lt;_Tp, void&gt;&gt;
35    basic_string(const _Tp&amp; __t, size_type __pos, size_type __n,
36             const _Alloc&amp; __a = _Alloc())
37    : basic_string(_S_to_string_view(__t).substr(__pos, __n), __a) { }
38    template&lt;typename _Tp, typename _Res&gt;
39    using _If_sv = enable_if_t&lt;
40      __and_&lt;is_convertible&lt;const _Tp&amp;, __sv_type&gt;,
41         __not_&lt;is_convertible&lt;const _Tp*, const basic_string*&gt;&gt;,
42         __not_&lt;is_convertible&lt;const _Tp&amp;, const _CharT*&gt;&gt;&gt;::value,
43      _Res&gt;;
44__not_&lt;is_convertible&lt;const _Tp&amp;, const _CharT*&gt;&gt;&gt;::value
45constexpr basic_string( const CharT* s,
46                        const Allocator&amp; alloc = Allocator() ); //(5)
47
48template&lt; class T &gt;
49explicit basic_string( const T&amp; t,
50                       const Allocator&amp; alloc = Allocator() ); //(10)
51

(10) should be selected if T is convertible to string_view. But (10) is explicit so this problem should be selected without {}. I don't think this check is needed in _If_sv. They probably have used same _If_sv for both overloads (10) and (11) that you mentioned, so both are working incorrectly now.

Source https://stackoverflow.com/questions/70591571

QUESTION

Why does std::basic_string_view have two equality comparison operators?

Asked 2022-Jan-25 at 15:13

A quote from the standard regarding std::basic_string_view equality comparison operators (see http://eel.is/c++draft/string.view#comparison):

[Example 1: A sample conforming implementation for operator== would be:

1template&lt;class charT, class traits&gt;
2constexpr bool operator==(basic_string_view&lt;charT, traits&gt; lhs,
3                        basic_string_view&lt;charT, traits&gt; rhs) noexcept {
4    return lhs.compare(rhs) == 0;
5}
6template&lt;class charT, class traits&gt;
7constexpr bool operator==(basic_string_view&lt;charT, traits&gt; lhs,
8                        type_identity_t&lt;basic_string_view&lt;charT, traits&gt;&gt; rhs) noexcept {
9    return lhs.compare(rhs) == 0;
10}
11

— end example]

Won't the second comparison operator be sufficient for all use cases? If the answer is no please provide the example code that will stop working (or will work differently) if the first comparison operator is removed. If the answer is yes then why does the C++ standard explicitly require the first operator to be defined?

ANSWER

Answered 2022-Jan-25 at 15:13

I think this is insufficient reduction as a result of the adoption of <=> in P1614. Before that paper, there were three ==s in the example:

1template&lt;class charT, class traits&gt;
2constexpr bool operator==(basic_string_view&lt;charT, traits&gt; lhs,
3                        basic_string_view&lt;charT, traits&gt; rhs) noexcept {
4    return lhs.compare(rhs) == 0;
5}
6template&lt;class charT, class traits&gt;
7constexpr bool operator==(basic_string_view&lt;charT, traits&gt; lhs,
8                        type_identity_t&lt;basic_string_view&lt;charT, traits&gt;&gt; rhs) noexcept {
9    return lhs.compare(rhs) == 0;
10}
11template&lt;class charT, class traits&gt;
12    constexpr bool operator==(basic_string_view&lt;charT, traits&gt; lhs,
13                              basic_string_view&lt;charT, traits&gt; rhs) noexcept {
14      return lhs.compare(rhs) == 0;
15    }
16  template&lt;class charT, class traits&gt;
17    constexpr bool operator==(basic_string_view&lt;charT, traits&gt; lhs,
18                              type_identity_t&lt;basic_string_view&lt;charT, traits&gt;&gt; rhs) noexcept {
19      return lhs.compare(rhs) == 0;
20    }
21 template&lt;class charT, class traits&gt;
22   constexpr bool operator==(type_identity_t&lt;basic_string_view&lt;charT, traits&gt;&gt; lhs,
23                             basic_string_view&lt;charT, traits&gt; rhs) noexcept {
24     return lhs.compare(rhs) == 0;
25   }
26

At the time, we needed three operators. The type_identity ones handle stuff like sv == literal and literal == sv, and then you need the homogeneous one to disambiguate sv == sv.

With the <=> adoption (or, more precisely, the == changes from P1185), == becomes symmetric so you don't need both type_identity operators to handle literal == sv, just the one suffices. I was basically mechanically going through and dropping unnecessary == and != overloads, so I removed that second.

But what I did not realize is with the other one gone, we now no longer need the homogeneous comparison to disambiguate from the other two (we don't have other two anymore, just other one) - it's enough to just have the one type_identity overload.

You could open an editorial issue to remove the homogeneous one. Or not, it's just an example anyway.

Source https://stackoverflow.com/questions/70849892

QUESTION

Vue 3: Module '&quot;../../node_modules/vue/dist/vue&quot;' has no exported member

Asked 2022-Jan-24 at 08:38

After updating my npm packages, some of the imports from the 'vue' module started showing errors:

TS2305: Module '"../../node_modules/vue/dist/vue"' has no exported member 'X'

where X is nextTick, onMounted, ref, watch etc. When serving the project, Vue says it's "failed to compile". WebStorm actually recognizes the exports, suggests them and shows types, but the error is shown regardless. Some exports like computed and defineComponent work just fine.

What I've tried:

  • Rollback to the previously used Vue version "3.2.2" > "3.0.11". It makes the abovementioned type errors disappear, but the app stops working entirely, showing lots of TypeError: Object(...) is not a function errors in console and not rendering the app at all. In the terminal, some new warnings are introduced: "export 'X' (imported as '_X') was not found in 'vue' where X is createElementBlock, createElementVNode, normalizeClass and normalizeStyle.
  • Rollback other dependencies. None of the ones that I tried helped fix the problem, unfortunately.
  • Manually declare the entirety of 'vue' module. We can declare the 'vue' module exports in shims-vue.d.ts, and it actually makes the errors disappear, however, this seems like a terrible, time-consuming workaround, so I would opt out for a better solution if possible.

My full list of dependencies:

1&quot;dependencies&quot;: {
2   &quot;@capacitor/android&quot;: &quot;3.0.0&quot;,
3   &quot;@capacitor/app&quot;: &quot;1.0.0&quot;,
4   &quot;@capacitor/core&quot;: &quot;3.0.0&quot;,
5   &quot;@capacitor/haptics&quot;: &quot;1.0.0&quot;,
6   &quot;@capacitor/keyboard&quot;: &quot;1.0.0&quot;,
7   &quot;@capacitor/push-notifications&quot;: &quot;^1.0.3&quot;,
8   &quot;@google-pay/button-element&quot;: &quot;^2.5.0&quot;,
9   &quot;@ionic-native/core&quot;: &quot;^5.34.0&quot;,
10   &quot;@ionic-native/qr-scanner&quot;: &quot;^5.35.0&quot;,
11   &quot;@ionic-native/vibration&quot;: &quot;^5.34.0&quot;,
12   &quot;@ionic/vue&quot;: &quot;^5.4.0&quot;,
13   &quot;@ionic/vue-router&quot;: &quot;^5.4.0&quot;,
14   &quot;@j-t-mcc/vue3-chartjs&quot;: &quot;^1.1.2&quot;,
15   &quot;chart.js&quot;: &quot;^3.4.1&quot;,
16   &quot;chartjs-plugin-datalabels&quot;: &quot;^2.0.0&quot;,
17   &quot;color&quot;: &quot;^3.1.3&quot;,
18   &quot;cordova-plugin-background-mode&quot;: &quot;^0.7.3&quot;,
19   &quot;cordova-plugin-device&quot;: &quot;^2.0.3&quot;,
20   &quot;cordova-plugin-qrscanner&quot;: &quot;^3.0.1&quot;,
21   &quot;core-js&quot;: &quot;^3.6.5&quot;,
22   &quot;firebase&quot;: &quot;^8.6.2&quot;,
23   &quot;numeral&quot;: &quot;^2.0.6&quot;,
24   &quot;pug&quot;: &quot;^3.0.2&quot;,
25   &quot;pug-plain-loader&quot;: &quot;^1.1.0&quot;,
26   &quot;secure-ls&quot;: &quot;^1.2.6&quot;,
27   &quot;uuid&quot;: &quot;^8.3.2&quot;,
28   &quot;v-cupertino&quot;: &quot;^1.2.4&quot;,
29   &quot;vue&quot;: &quot;^3.2.0&quot;,
30   &quot;vue-chartjs&quot;: &quot;^3.5.1&quot;,
31   &quot;vue-i18n&quot;: &quot;^9.1.3&quot;,
32   &quot;vue-numerals&quot;: &quot;^4.0.6&quot;,
33   &quot;vue-router&quot;: &quot;^4.0.0-0&quot;,
34   &quot;vuex&quot;: &quot;^4.0.1&quot;
35 },
36 &quot;devDependencies&quot;: {
37   &quot;@capacitor/cli&quot;: &quot;3.0.0&quot;,
38   &quot;@types/jest&quot;: &quot;^24.0.19&quot;,
39   &quot;@types/uuid&quot;: &quot;^8.3.1&quot;,
40   &quot;@typescript-eslint/eslint-plugin&quot;: &quot;^2.33.0&quot;,
41   &quot;@typescript-eslint/parser&quot;: &quot;^2.33.0&quot;,
42   &quot;@vue/cli-plugin-babel&quot;: &quot;~4.5.0&quot;,
43   &quot;@vue/cli-plugin-e2e-cypress&quot;: &quot;~4.5.0&quot;,
44   &quot;@vue/cli-plugin-eslint&quot;: &quot;^4.5.13&quot;,
45   &quot;@vue/cli-plugin-router&quot;: &quot;~4.5.0&quot;,
46   &quot;@vue/cli-plugin-typescript&quot;: &quot;~4.5.0&quot;,
47   &quot;@vue/cli-plugin-unit-jest&quot;: &quot;~4.5.0&quot;,
48   &quot;@vue/cli-service&quot;: &quot;~4.5.0&quot;,
49   &quot;@vue/compiler-sfc&quot;: &quot;^3.0.0-0&quot;,
50   &quot;@vue/eslint-config-typescript&quot;: &quot;^5.0.2&quot;,
51   &quot;@vue/test-utils&quot;: &quot;^2.0.0-0&quot;,
52   &quot;eslint&quot;: &quot;^6.7.2&quot;,
53   &quot;eslint-plugin-vue&quot;: &quot;^7.0.0-0&quot;,
54   &quot;stylus&quot;: &quot;^0.54.7&quot;,
55   &quot;stylus-loader&quot;: &quot;^3.0.2&quot;,
56   &quot;typescript&quot;: &quot;~3.9.3&quot;,
57   &quot;vue-jest&quot;: &quot;^5.0.0-0&quot;
58 }
59

ANSWER

Answered 2021-Aug-15 at 13:53

That named exports from composition API are unavailable means that vue is Vue 2 at some place which has only default export. Since Vue 3 is in dependencies and both lock file and node_modules were refreshed, this means that Vue 2 is nested dependency of some direct dependency.

The problem needs to be investigated in lock file. It shows that @vue/cli-plugin-unit-jest@4.5.13 depends on vue-jest@3 which depends on vue@2.

A possible solution is to upgrade @vue/cli-plugin-unit-jest to the latest version, next. The same likely applies to other @vue/cli-* packages because they have matching versions.

Source https://stackoverflow.com/questions/68790790

QUESTION

Angular TSLint - Cannot find builder &quot;@angular-devkit/build-angular:tslint&quot;

Asked 2022-Jan-04 at 13:18

When I try to run command ng lint --fix cli throws this error:

1An unhandled exception occurred: Cannot find builder &quot;@angular-devkit/build-angular:tslint&quot;.
2See &quot;C:\Users\MOE89A~1.ZAR\AppData\Local\Temp\ng-Ijc3an\angular-errors.log&quot; for further details.
3

My lint confing in angular.json:

1An unhandled exception occurred: Cannot find builder &quot;@angular-devkit/build-angular:tslint&quot;.
2See &quot;C:\Users\MOE89A~1.ZAR\AppData\Local\Temp\ng-Ijc3an\angular-errors.log&quot; for further details.
3&quot;lint&quot;: {
4  &quot;builder&quot;: &quot;@angular-devkit/build-angular:tslint&quot;,
5  &quot;options&quot;: {
6    &quot;tsConfig&quot;: [
7      &quot;projects/wepod-app/tsconfig.app.json&quot;,
8      &quot;projects/wepod-app/tsconfig.spec.json&quot;,
9      &quot;projects/wepod-app/e2e/tsconfig.json&quot;
10    ],
11    &quot;exclude&quot;: [
12      &quot;**/node_modules/**&quot;
13    ]
14  }
15},
16

My package.json:

1An unhandled exception occurred: Cannot find builder &quot;@angular-devkit/build-angular:tslint&quot;.
2See &quot;C:\Users\MOE89A~1.ZAR\AppData\Local\Temp\ng-Ijc3an\angular-errors.log&quot; for further details.
3&quot;lint&quot;: {
4  &quot;builder&quot;: &quot;@angular-devkit/build-angular:tslint&quot;,
5  &quot;options&quot;: {
6    &quot;tsConfig&quot;: [
7      &quot;projects/wepod-app/tsconfig.app.json&quot;,
8      &quot;projects/wepod-app/tsconfig.spec.json&quot;,
9      &quot;projects/wepod-app/e2e/tsconfig.json&quot;
10    ],
11    &quot;exclude&quot;: [
12      &quot;**/node_modules/**&quot;
13    ]
14  }
15},
16{
17  &quot;name&quot;: &quot;wepod-clients&quot;,
18  &quot;version&quot;: &quot;3.2.3&quot;,
19  &quot;scripts&quot;: {
20    &quot;ng&quot;: &quot;ng&quot;,
21    &quot;start&quot;: &quot;node patch.js &amp;&amp; ng serve&quot;,
22    &quot;build&quot;: &quot;node patch.js &amp;&amp; node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng run wepod-app:app-shell:production &amp;&amp; ng run wepod-app:auth-standalone:production&quot;,
23    &quot;server&quot;: &quot;npm run build &amp;&amp; http-server -p 9090 -c-1 dist&quot;,
24    &quot;test&quot;: &quot;ng test&quot;,
25    &quot;lint&quot;: &quot;ng lint --fix&quot;,
26    &quot;e2e&quot;: &quot;ng e2e&quot;,
27    &quot;postinstall&quot;: &quot;node patch.js &amp;&amp; ngcc&quot;,
28    &quot;postbuild&quot;: &quot;node post-build.js&quot;,
29    &quot;prepare&quot;: &quot;husky install&quot;,
30    &quot;build-latest&quot;: &quot;git pull origin production &amp;&amp; npm run build&quot;
31  },
32  &quot;private&quot;: true,
33  &quot;dependencies&quot;: {
34    &quot;@angular/animations&quot;: &quot;^13.0.0&quot;,
35    &quot;@angular/cdk&quot;: &quot;^13.0.0&quot;,
36    &quot;@angular/cli&quot;: &quot;^13.0.1&quot;,
37    &quot;@angular/common&quot;: &quot;^13.0.0&quot;,
38    &quot;@angular/compiler&quot;: &quot;^13.0.0&quot;,
39    &quot;@angular/core&quot;: &quot;^13.0.0&quot;,
40    &quot;@angular/forms&quot;: &quot;^13.0.0&quot;,
41    &quot;@angular/localize&quot;: &quot;^13.0.0&quot;,
42    &quot;@angular/platform-browser&quot;: &quot;^13.0.0&quot;,
43    &quot;@angular/platform-browser-dynamic&quot;: &quot;^13.0.0&quot;,
44    &quot;@angular/platform-server&quot;: &quot;^13.0.0&quot;,
45    &quot;@angular/router&quot;: &quot;^13.0.0&quot;,
46    &quot;@angular/service-worker&quot;: &quot;^13.0.0&quot;,
47    &quot;@types/video.js&quot;: &quot;^7.3.27&quot;,
48    &quot;animate.css&quot;: &quot;^4.1.1&quot;,
49    &quot;assert&quot;: &quot;^2.0.0&quot;,
50    &quot;bowser&quot;: &quot;^2.11.0&quot;,
51    &quot;buffer&quot;: &quot;^6.0.3&quot;,
52    &quot;bundle-loader&quot;: &quot;^0.5.6&quot;,
53    &quot;compare-version&quot;: &quot;^0.1.2&quot;,
54    &quot;constants-browserify&quot;: &quot;^1.0.0&quot;,
55    &quot;crypto-browserify&quot;: &quot;^3.12.0&quot;,
56    &quot;crypto-js&quot;: &quot;^4.1.1&quot;,
57    &quot;d3&quot;: &quot;^6.5.0&quot;,
58    &quot;hammerjs&quot;: &quot;^2.0.8&quot;,
59    &quot;https-browserify&quot;: &quot;^1.0.0&quot;,
60    &quot;jalali-moment&quot;: &quot;^3.3.10&quot;,
61    &quot;lottie-web&quot;: &quot;^5.7.13&quot;,
62    &quot;lzutf8&quot;: &quot;^0.6.0&quot;,
63    &quot;net&quot;: &quot;^1.0.2&quot;,
64    &quot;ng-gallery&quot;: &quot;^5.1.1&quot;,
65    &quot;ng2-jalali-date-picker&quot;: &quot;^2.4.2&quot;,
66    &quot;ngx-device-detector&quot;: &quot;^1.5.2&quot;,
67    &quot;ngx-doughnut-chart&quot;: &quot;0.0.4&quot;,
68    &quot;ngx-infinite-scroll&quot;: &quot;^8.0.2&quot;,
69    &quot;ngx-lottie&quot;: &quot;^7.0.4&quot;,
70    &quot;ngx-owl-carousel-o&quot;: &quot;^3.1.1&quot;,
71    &quot;ngx-skeleton-loader&quot;: &quot;^2.10.1&quot;,
72    &quot;ngx-toastr&quot;: &quot;^12.1.0&quot;,
73    &quot;os-browserify&quot;: &quot;^0.3.0&quot;,
74    &quot;podchat-browser&quot;: &quot;^10.14.13&quot;,
75    &quot;rxjs&quot;: &quot;^6.6.7&quot;,
76    &quot;stream-browserify&quot;: &quot;^3.0.0&quot;,
77    &quot;stream-http&quot;: &quot;^3.2.0&quot;,
78    &quot;tls&quot;: &quot;0.0.1&quot;,
79    &quot;tslib&quot;: &quot;^2.0.0&quot;,
80    &quot;uuid&quot;: &quot;^8.3.2&quot;,
81    &quot;video.js&quot;: &quot;^7.15.4&quot;,
82    &quot;videojs-record&quot;: &quot;^4.5.0&quot;,
83    &quot;zone.js&quot;: &quot;~0.11.4&quot;
84  },
85  &quot;devDependencies&quot;: {
86    &quot;@angular-devkit/build-angular&quot;: &quot;^13.0.1&quot;,
87    &quot;@angular-devkit/core&quot;: &quot;^13.0.1&quot;,
88    &quot;@angular/compiler-cli&quot;: &quot;^13.0.0&quot;,
89    &quot;@angular/language-service&quot;: &quot;^13.0.0&quot;,
90    &quot;@egjs/hammerjs&quot;: &quot;^2.0.17&quot;,
91    &quot;@types/hammerjs&quot;: &quot;^2.0.40&quot;,
92    &quot;@types/jasmine&quot;: &quot;~3.6.0&quot;,
93    &quot;@types/jasminewd2&quot;: &quot;^2.0.10&quot;,
94    &quot;@types/node&quot;: &quot;^12.20.36&quot;,
95    &quot;codelyzer&quot;: &quot;^6.0.0&quot;,
96    &quot;colors&quot;: &quot;^1.4.0&quot;,
97    &quot;git-tag-version&quot;: &quot;^1.3.1&quot;,
98    &quot;gulp&quot;: &quot;^4.0.2&quot;,
99    &quot;gulp-gzip&quot;: &quot;^1.4.2&quot;,
100    &quot;http-server&quot;: &quot;^14.0.0&quot;,
101    &quot;husky&quot;: &quot;^7.0.4&quot;,
102    &quot;jasmine-core&quot;: &quot;~3.6.0&quot;,
103    &quot;jasmine-spec-reporter&quot;: &quot;~5.0.0&quot;,
104    &quot;karma&quot;: &quot;^6.3.7&quot;,
105    &quot;karma-chrome-launcher&quot;: &quot;~3.1.0&quot;,
106    &quot;karma-coverage-istanbul-reporter&quot;: &quot;^2.1.0&quot;,
107    &quot;karma-jasmine&quot;: &quot;~4.0.0&quot;,
108    &quot;karma-jasmine-html-reporter&quot;: &quot;^1.5.0&quot;,
109    &quot;protractor&quot;: &quot;^7.0.0&quot;,
110    &quot;ts-node&quot;: &quot;^8.10.2&quot;,
111    &quot;tslint&quot;: &quot;^6.1.3&quot;,
112    &quot;typescript&quot;: &quot;4.4.4&quot;,
113    &quot;zip-dir&quot;: &quot;^2.0.0&quot;
114  },
115  &quot;browser&quot;: {
116    &quot;fs&quot;: false,
117    &quot;path&quot;: false,
118    &quot;os&quot;: false
119  }
120}
121

ANSWER

Answered 2021-Nov-28 at 10:34

From v13 angular doesn't use tslint anymore due to deprecation.

Run ng add @angular-eslint/schematics to add eslint to your application.

It will use tslint-to-eslint-config to migrate you to eslint automatically.

It will generate a .eslintrc.json file and migrate tslint.json to it.

Nothing else is needed to be done.

Source https://stackoverflow.com/questions/70141707

QUESTION

Multiple labels per item on Kendo chart

Asked 2022-Jan-02 at 21:14

I'm trying to get multiple label per item on Kendo Column chart Desired layout looks like this desired chart

I was able to get only this layout

1import { Component } from '@angular/core';
2import { groupBy, GroupResult } from '@progress/kendo-data-query';
3import { ValueAxisLabels } from '@progress/kendo-angular-charts';
4
5export type TrendItem = {
6  clientName: string;
7  periodName: string;
8  income: number;
9};
10
11@Component({
12  selector: 'my-app',
13  template: `
14        &lt;kendo-chart&gt;
15          &lt;kendo-chart-category-axis&gt;
16              &lt;kendo-chart-category-axis-item [categories]=&quot;categories&quot;&gt;
17              &lt;/kendo-chart-category-axis-item&gt;
18          &lt;/kendo-chart-category-axis&gt;
19
20          &lt;kendo-chart-value-axis&gt;
21              &lt;kendo-chart-value-axis-item [labels]=&quot;valueAxisLabels&quot;&gt;
22              &lt;/kendo-chart-value-axis-item&gt;
23          &lt;/kendo-chart-value-axis&gt;
24
25          &lt;kendo-chart-series&gt;
26            &lt;kendo-chart-series-item *ngFor=&quot;let groupedResult of groupedTrendsByPeriod&quot; [data]=&quot;groupedResult.items&quot; field=&quot;income&quot; type=&quot;column&quot;&gt;
27              &lt;kendo-chart-series-item-labels [content]=&quot;labelVisual&quot;&gt;
28              &lt;/kendo-chart-series-item-labels&gt;
29           &lt;/kendo-chart-series-item&gt;
30          &lt;/kendo-chart-series&gt;
31        &lt;/kendo-chart&gt;
32    `,
33})
34export class AppComponent {
35  public valueAxisLabels: ValueAxisLabels = {
36    font: 'bold 16px Arial, sans-serif',
37  };
38
39  public trendItems: TrendItem[] = [
40    {
41      clientName: 'Client1',
42      periodName: 'Q1 2020',
43      income: 20,
44    },
45    {
46      clientName: 'Client1',
47      periodName: 'Q2 2020',
48      income: 15,
49    },
50    {
51      clientName: 'Client1',
52      periodName: 'Q3 2020',
53      income: 35,
54    },
55    {
56      clientName: 'Client1',
57      periodName: 'Q4 2020',
58      income: 40,
59    },
60    {
61      clientName: 'Client2',
62      periodName: 'Q1 2020',
63      income: 15,
64    },
65    {
66      clientName: 'Client2',
67      periodName: 'Q2 2020',
68      income: 20,
69    },
70    {
71      clientName: 'Client2',
72      periodName: 'Q3 2020',
73      income: 15,
74    },
75    {
76      clientName: 'Client2',
77      periodName: 'Q4 2020',
78      income: 30,
79    }
80  ];
81
82  public categories = (groupBy(this.trendItems, [{ field: 'clientName' }]) as GroupResult[])
83    .map((e) =&gt; e.value);
84
85  public groupedTrendsByPeriod = groupBy(this.trendItems, [{ field: 'periodName' }]) as GroupResult[];
86
87  public labelVisual(e: { dataItem: TrendItem }) {
88    return `$${e.dataItem.income}\r\n${e.dataItem.periodName}`;
89  }
90}
91

You can try this code here.

My current result look like this current progress


So my question is how to display multiple labels per item like on the first picture?


My current obstacles.

  • I didn't find a way to add multiple <kendo-chart-series-item-labels> elements. Only one will be rendered, rest will be ignored.
  • I didn't find a way to position labels below column chart. For column chart it's only possible to use "center", "insideBase", "insideEnd", "outsideEnd" options (according to API Reference) but none of them gives me desired position.

ANSWER

Answered 2022-Jan-02 at 08:18

I don't think kendo provides any native solution for that but what I can suggest is to:

  1. Use legends to display each bar meaning. like the example here.

  2. Use some self generated labels and position them under the table which is risky for UI. I provided an example here.

Source https://stackoverflow.com/questions/70465893

QUESTION

Scoping of variable inside a javascript map

Asked 2021-Dec-15 at 09:48
1{charts.map( (ch, i) =&gt; {
2   const tempApiDetails = {...apiDetails};
3   tempApiDetails.apiOptions.params = generateParams(ch.dashBoardType, ch.reportType); 
4   //above line is to generate params for API call
5
6   &lt;SimpleTable apiOptions={tempApiDetails} /&gt;
7})}
8

in the above code the charts is having 3 items. but all three in the end is having the same params which is made for the last chart in the charts variable. Can somebody explain me what will be underlying principle for it?

ANSWER

Answered 2021-Dec-15 at 09:48

This has nothing to do with scope.

tempApiDetails is a shallow copy of apiDetails.

This means the value of tempApiDetails.apiOptions is the same each time it goes around the loop.

Since it is an object, and objects are stored by reference, every time you assign to apiOptions.params you are overwriting the params of the same object.

You need to make a clone of apiOptions.

1{charts.map( (ch, i) =&gt; {
2   const tempApiDetails = {...apiDetails};
3   tempApiDetails.apiOptions.params = generateParams(ch.dashBoardType, ch.reportType); 
4   //above line is to generate params for API call
5
6   &lt;SimpleTable apiOptions={tempApiDetails} /&gt;
7})}
8const tempApiDetails = {
9    ...apiDetails,
10    apiOptions: {...apiDetails.apiOptions}
11};
12

And you can do the whole thing in one go:

1{charts.map( (ch, i) =&gt; {
2   const tempApiDetails = {...apiDetails};
3   tempApiDetails.apiOptions.params = generateParams(ch.dashBoardType, ch.reportType); 
4   //above line is to generate params for API call
5
6   &lt;SimpleTable apiOptions={tempApiDetails} /&gt;
7})}
8const tempApiDetails = {
9    ...apiDetails,
10    apiOptions: {...apiDetails.apiOptions}
11};
12const tempApiDetails = {
13    ...apiDetails,
14    apiOptions: {
15         ...apiDetails.apiOptions,
16         params: generateParams(ch.dashBoardType, ch.reportType)
17    }
18};
19

For complex data structures you might want to look at the immer library which will take care of all the cloning for you.

1{charts.map( (ch, i) =&gt; {
2   const tempApiDetails = {...apiDetails};
3   tempApiDetails.apiOptions.params = generateParams(ch.dashBoardType, ch.reportType); 
4   //above line is to generate params for API call
5
6   &lt;SimpleTable apiOptions={tempApiDetails} /&gt;
7})}
8const tempApiDetails = {
9    ...apiDetails,
10    apiOptions: {...apiDetails.apiOptions}
11};
12const tempApiDetails = {
13    ...apiDetails,
14    apiOptions: {
15         ...apiDetails.apiOptions,
16         params: generateParams(ch.dashBoardType, ch.reportType)
17    }
18};
19const tempApiDetails = produce(apiDetails, draft =&gt; {
20    draft.apiOptions.params = generateParams(ch.dashBoardType, ch.reportType);
21});
22

Source https://stackoverflow.com/questions/70361444

QUESTION

Draw a horizontal and vertical line on mouse hover in chart js

Asked 2021-Dec-08 at 12:29

I am stuck with a problem on chart js while creating line chart. I want to create a chart with the specified data and also need to have horizontal and vertical line while I hover on intersection point. I am able to create vertical line on hover but can not find any solution where I can draw both the line. Here is my code to draw vertical line on hover.

1    window.lineOnHover = function(){        
2        Chart.defaults.LineWithLine = Chart.defaults.line;
3        Chart.controllers.LineWithLine = Chart.controllers.line.extend({
4        draw: function(ease) {
5          Chart.controllers.line.prototype.draw.call(this, ease);
6
7          if (this.chart.tooltip._active &amp;&amp; this.chart.tooltip._active.length) {
8             var activePoint = this.chart.tooltip._active[0],
9                 ctx = this.chart.ctx,
10                 x = activePoint.tooltipPosition().x,
11                 topY = this.chart.legend.bottom,
12                 bottomY = this.chart.chartArea.bottom;
13
14             // draw line
15             ctx.save();
16             ctx.beginPath();
17             ctx.moveTo(x, topY);
18             ctx.lineTo(x, bottomY);
19             ctx.lineWidth = 1;
20             ctx.setLineDash([3,3]);
21             ctx.strokeStyle = '#FF4949';
22             ctx.stroke();
23             ctx.restore();
24          }
25        }
26        });
27    }
28
29
30//create chart
31var backhaul_wan_mos_chart = new Chart(backhaul_wan_mos_chart, {
32    type: 'LineWithLine',
33    data: {
34        labels: ['Aug 1', 'Aug 2', 'Aug 3', 'Aug 4', 'Aug 5', 'Aug 6', 'Aug 7', 'Aug 8'],
35        datasets: [{
36                label: 'Series 1',
37                data: [15, 16, 17, 18, 16, 18, 17, 14, 19, 16, 15, 15, 17],
38                pointRadius: 0,
39                fill: false,
40                borderDash: [3, 3],
41                borderColor: '#0F1731',
42//                    backgroundColor: '#FF9CE9',
43//                    pointBackgroundColor: ['#FB7BDF'],
44                borderWidth: 1
45            }],
46//                lineAtIndex: 2,
47    },
48    options: {
49        tooltips: {
50            intersect: false
51        },
52        legend: {
53            display: false
54        },
55        scales: {
56            xAxes: [{
57                    gridLines: {
58                        offsetGridLines: true
59                    },
60                    ticks: {
61                        fontColor: '#878B98',
62                        fontStyle: &quot;600&quot;,
63                        fontSize: 10,
64                        fontFamily: &quot;Poppins&quot;
65                    }
66                }],
67            yAxes: [{
68                    display: true,
69                    stacked: true,
70                    ticks: {
71                        min: 0,
72                        max: 50,
73                        stepSize: 10,
74                        fontColor: '#878B98',
75                        fontStyle: &quot;500&quot;,
76                        fontSize: 10,
77                        fontFamily: &quot;Poppins&quot;
78                    }
79                }]
80        },
81        responsive: true,
82    }
83});
84

my output of the code is as follow in WAN MoS Score graph -- enter image description here

So I want to have an horizontal line with the same vertical line together when I hover on the intersection (plotted) point..

Please help my guys..Thanks in advance.

ANSWER

Answered 2021-Dec-06 at 04:46

I have done exactly this (but vertical line only) in a previous version of one of my projects. Unfortunately this feature has been removed but the older source code file can still be accessed via my github.

The key is this section of the code:

1    window.lineOnHover = function(){        
2        Chart.defaults.LineWithLine = Chart.defaults.line;
3        Chart.controllers.LineWithLine = Chart.controllers.line.extend({
4        draw: function(ease) {
5          Chart.controllers.line.prototype.draw.call(this, ease);
6
7          if (this.chart.tooltip._active &amp;&amp; this.chart.tooltip._active.length) {
8             var activePoint = this.chart.tooltip._active[0],
9                 ctx = this.chart.ctx,
10                 x = activePoint.tooltipPosition().x,
11                 topY = this.chart.legend.bottom,
12                 bottomY = this.chart.chartArea.bottom;
13
14             // draw line
15             ctx.save();
16             ctx.beginPath();
17             ctx.moveTo(x, topY);
18             ctx.lineTo(x, bottomY);
19             ctx.lineWidth = 1;
20             ctx.setLineDash([3,3]);
21             ctx.strokeStyle = '#FF4949';
22             ctx.stroke();
23             ctx.restore();
24          }
25        }
26        });
27    }
28
29
30//create chart
31var backhaul_wan_mos_chart = new Chart(backhaul_wan_mos_chart, {
32    type: 'LineWithLine',
33    data: {
34        labels: ['Aug 1', 'Aug 2', 'Aug 3', 'Aug 4', 'Aug 5', 'Aug 6', 'Aug 7', 'Aug 8'],
35        datasets: [{
36                label: 'Series 1',
37                data: [15, 16, 17, 18, 16, 18, 17, 14, 19, 16, 15, 15, 17],
38                pointRadius: 0,
39                fill: false,
40                borderDash: [3, 3],
41                borderColor: '#0F1731',
42//                    backgroundColor: '#FF9CE9',
43//                    pointBackgroundColor: ['#FB7BDF'],
44                borderWidth: 1
45            }],
46//                lineAtIndex: 2,
47    },
48    options: {
49        tooltips: {
50            intersect: false
51        },
52        legend: {
53            display: false
54        },
55        scales: {
56            xAxes: [{
57                    gridLines: {
58                        offsetGridLines: true
59                    },
60                    ticks: {
61                        fontColor: '#878B98',
62                        fontStyle: &quot;600&quot;,
63                        fontSize: 10,
64                        fontFamily: &quot;Poppins&quot;
65                    }
66                }],
67            yAxes: [{
68                    display: true,
69                    stacked: true,
70                    ticks: {
71                        min: 0,
72                        max: 50,
73                        stepSize: 10,
74                        fontColor: '#878B98',
75                        fontStyle: &quot;500&quot;,
76                        fontSize: 10,
77                        fontFamily: &quot;Poppins&quot;
78                    }
79                }]
80        },
81        responsive: true,
82    }
83});
84Chart.defaults.LineWithLine = Chart.defaults.line;
85Chart.controllers.LineWithLine = Chart.controllers.line.extend({
86   draw: function(ease) {
87      Chart.controllers.line.prototype.draw.call(this, ease);
88
89      if (this.chart.tooltip._active &amp;&amp; this.chart.tooltip._active.length) {
90         var activePoint = this.chart.tooltip._active[0],
91             ctx = this.chart.ctx,
92             x = activePoint.tooltipPosition().x,
93             topY = this.chart.legend.bottom,
94             bottomY = this.chart.chartArea.bottom;
95
96         // draw line
97         ctx.save();
98         ctx.beginPath();
99         ctx.moveTo(x, topY);
100         ctx.lineTo(x, bottomY);
101         ctx.lineWidth = 0.5;
102         ctx.strokeStyle = '#A6A6A6';
103         ctx.stroke();
104         ctx.restore();
105      }
106   }
107});
108

Another caveat is that the above code works with Chart.js 2.8 and I am aware that the current version of Chart.js is 3.1. I haven't read the official manual on the update but my personal experience is that this update is not 100% backward-compatible--so not sure if it still works if you need Chart.js 3. (But sure you may try 2.8 first and if it works you can then somehow tweak the code to make it work on 3.1)

Source https://stackoverflow.com/questions/70112637

Community Discussions contain sources that include Stack Exchange Network

Tutorials and Learning Resources in Chart

Tutorials and Learning Resources are not available at this moment for Chart

Share this Page

share link

Get latest updates on Chart