I built a plotly-dash app that generates two data tables and two scatter plots. I don't have much understanding of html but I was able to get the basic functionality built using different resources. Anyhow, one thing I can't seem to get is how to make a cell entry clickable (hyperlink). I have a url in the cell and it displays fine, but I want to click on it and open it in different tab/page. I can also add the url within tags making it presumably "clickable" however I now see the link within tags, and still not able to click it. See the pic below for reference.
I think I might need to use dcc.link and dcc.location components but being novice I can't quite figure out how.
My app.layout has this portion for the table2. As you can see it's a simple Div component and I am posting all the table2 as is.
html.Div([
html.H2("Sentimental Analysis", style={'color': 'blue'}),
html.Div('''
Enter the phrase:'''),
dcc.Input(id='input_2_state', value='regenerative agriculture', type='text'),
html.Div("Choose the number of days for which the data will be collected for?"),
dcc.Dropdown(id='dropdown_2', options=[{'label': 'A Week Ago', 'value': '7d'}, {'label': ' 2 Weeks Ago', 'value': '14d'},{'label':' A Year Ago','value':'1y'}],
value = '7d'),
html.Button(id='submit-button2', children='Submit'),],style={'display': 'inline-block', 'vertical-align': 'top', 'margin-left': '3vw', 'margin-top': '3vw', 'width':'5'}),
html.Div([
html.Div(id="table2"),
dcc.Graph(id='graph2'),], style={'display': 'inline-block', 'vertical-align': 'top','margin-left': '3vw', 'margin-top': '3vw', 'width':'5'})
In my app.callback I have following defined as columns of the datatable
columns2= [dict(name='author', id='author', type='text'),
dict(name='preview', id='preview', type='text'),
dict(name='score', id='score', type='text'),
dict(name='permalink', id='permalink')]
And then finally I am returning table (along with figures like this)
return fig1, dt.DataTable(data=df3.to_dict('rows'), columns=columns2), fig2
The whole code is at github-sentiment-analysis
Could anyone please help me as to how can I make the hyperlink's hyper?
Related
Not sure if this is a good place to ask but I’m about an hour into editing a Sharepoint for the first time, have zero prior knowledge on creating/editing Sharepoints, and I’m stuck trying to figure out how to wrap text to a new line in the description field of a particular column on my list.
We need the submitters to stop at a certain point and not touch the remaining fields, and the only way I can figure out how to do that is by adding a column description that tells them to stop. I want the description of that column to read as:
————-—STOP ————-—
Submitters stop here. Do not use the fields below, unless attaching images/files. The remaining fields are for macro champ use only.
———————————————-
Instead of :
————-—STOP ————-—Submitters stop here. Do not use the fields below, unless attaching images/files. The remaining fields are for macro champ use only.———————————————-
Do I need to use JSON to achieve this? If so..what is the code I would need to use?
Also open to alternative solutions to create a line/stop/hide fields from them or something.
——————
ETA - photo of what my column formatting box looks like.
——————
ETA for further clarification -
The column in particular that I am trying to add the “stop” message to is actually named “Attachments included?” And has ‘yes’ or ‘no’ radio choice buttons. Then the description underneath that column says “submitters stop here, unless attaching images/files below.” This column, and it’s description, are hidden from the list overview and only visible when submitting a +New item.
The reason for doing this is because we have a handful of fields towards the end of the +New item submission form that we don’t want submitters to touch, as they are for the help desk agents to fill out only.
I don’t see any other way to add a stop/line or hide certain fields from the submitters (while still leaving them visible to the help desk team), so just trying to make this “stop” description look a little neater.
Format the column as shown below:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"txtContent": " ————-—STOP ————-— \n\n Submitters stop here. Do not use the fields below, unless attaching images/files. The remaining fields are for macro champ use only. \n\n ———————————————",
"style": {
"width": "100%",
"font-weight": "bold"
}
}
Update:
I'm making a Sheet to be used by elementary students, to track some energy "usage" in their class, based on a date. To make it dead easy, I've created dropdowns for their choices (text).
In order to make a graph, I've changed the choices into numbers ("All"=3, "Some"=2, "None"=1, "N/A"=0) onto another tab (using Apps Script). This makes a nice graph, but the vertical axis of course shows the numbers. I'm hoping there is a way to swap them out for the text.
I've tried the 'ticks' option, but nothing changes:
var vAxisOptions = {
0: {
ticks: [{v:0, f:'N/A'}, {v:1, f:'None'}, {v:2, f:'Some'}, {v:3, f:'All'}, {v:4, f:''}],
maxValue: 4,
gridlines: {count: 5} //add an extra line of space to see the lines better
}
};
And then apply it by .setOption('vAxes', vAxisOptions).
I suspect this just isn't possible, but is it? Thanks!!
Example: https://docs.google.com/spreadsheets/d/1zOeXJy92LdCmhdLW6MmLA0JCNVk34kk50B3tQGACwlY/edit?usp=sharing
p.s. Click the "View Results" button to make the graph if you make data changes
There is this Google Issue tracker issue on this matter that it is being worked on.
You can go there and click on the star next to the title of the issue so you will get updates on the issue.
I'm using cypress to create E2E test for our new application.
The application has a menu that contains buttons to display different data on a map screen. All of these buttons have the same div name, which I can differentiate between by entering the text name of the button:
cy.get('div.sb-item-body').contains('Historical Land Uses').click()
cy.get('div.sb-item-body').contains('Potentially Contaminative Industrial Uses (Past Land Use)').click()
cy.get('div.sb-item-body').contains('Potentially Infilled Land (Water)').click()
There is a further complication where two of the buttons have the same title (Landfill and Waste) as that dataset is in two different sections. So when I attempt to access the second -
cy.get('div.sb-item-body').contains('Landfill and Waste').click()
It is trying to select the first button with that name, and it's failing as that button has been collapsed and is no longer selectable.
Any help would be appreciated.
See the .eq() syntax.
You can use this when the selector returns multiple elements, e.g
cy.get('div.sb-item-body').contains('Landfill and Waste').eq(0).click()
cy.get('div.sb-item-body').contains('Landfill and Waste').eq(1).click()
I'm not sure if the 'collapsed' first button might interfere with it.
A more long-winded way is to use .then() to process the array of returned values, e.g
cy.get('div.sb-item-body').contains('Landfill and Waste').then(els => {
const buttons = [...els];
cy.wrap(buttons[0]).click()
expect(..).to...
cy.wrap(buttons[1]).click()
expect(..).to...
})
The spread operator converts the wrapped elements into an array you can work with, and cy.wrap() re-wraps the selected item making it clickable.
I want to add a line chart as a control chart in one of the widget pages in October CMS. CMS has pre-built classes for bar chart and pie chart. I was wondering if they have similar classes for other kind of analytics data.
I want to add the line chart prebuilt class to an html partials page, that can be used as a widget in october cms.
It seems that you are talking about things like this: https://octobercms.com/docs/ui/chart and you are looking for another type of chart besides those mentioned there.
I wanted to say if such a thing is not listed there then probably it does not exist. But... hey... I just went looking into the backend UI JS code.
Look at this file in your October app root: {% app root %}/modules/system/assets/ui/js/chart.line.js
/*
* Line Chart Plugin
*
* Data attributes:
* - data-control="chart-line" - enables the line chart plugin
* - data-reset-zoom-link="#reset-zoom" - specifies a link to reset zoom
* - data-zoomable - indicates that the chart is zoomable
* - data-time-mode="weeks" - if the "weeks" value is specified and the xaxis mo
de is "time", the X axis labels will be displayed as week end dates.
* - data-chart-options="xaxis: {mode: 'time'}" - specifies the Flot configurati
on in JSON format. See https://github.com/flot/flot/blob/master/API.md for detai
ls.
*
* Data sets are defined with the SPAN elements inside the chart element: <span
data-chart="dataset" data-set-data="[0,0],[1,19]">
* Data set elements could contain data attributes with names in the format "dat
a-set-color". The names for the data set
* attributes are described in the Flot documentation: https://github.com/flot/f
lot/blob/master/API.md#data-format
*
* JavaScript API:
* $('.chart').chartLine({ resetZoomLink:'#reset-zoom' })
*
So the functionality is there, it seems, but it's not in the public docs. Looks like you could try out something like this
<div
class="control-chart"
data-control="chart-line"
style="min-height:400px"
data-zoomable="1"
data-reset-zoom-link="#reset-zoom"
data->
<span data-chart="dataset" data-set-label="Graph me tender" data-set-data="[0,0],[1,5],[3,8],[4,2],[5,6]">
Graph me tender
</span>
<span data-chart="dataset" data-set-label="Graph me sweet" data-set-data="[0,0],[1,5],[3,8],[4,2]">
Graph me sweet
</span>
</div>
<a id="#reset-zoom" href="#">Reset zoom</a>
(Edit: There was a somewhat "dirty" tweak necessary here: I added a min-height css attribute, otherwise there was an error thrown. Maybe there should be some additional class for that instead which I do not know. Also, the two data-sets are not plotted in order (the second is plotted first) and are wrongly labeled in the legend, and appear horizontally connected to each other. The zoom function does not seem to work, etc, etc. I think this line graph thingy is possibly still work in progress and that might be the reason why it is not included in the docs yet. )
, play around with it and see what it does. (I have not tested this and hope it works somehow.) If I understand correctly it should give you a zoomable line graph with data points [0,0],[1,5],[3,8],[4,2],[5,6] (x,y coordinate points) and the link below should reset the zoom (edit: zooming does not work. maybe need to set some additional options for that)
The whole thing seems to be based on this Flot JQuery chart library. So you might find some good further hints there or here, besides reading October's {% app root %}/modules/system/assets/ui/js/chart.line.js source code.
This is a great site, and I've already had a lot of questions answered simply by scrolling and searching through other postings. Unfortunately, I can't seem to track down an answer that specifically helps this problem, and figured I would try posting and looking for help-
I'm using ImportXML and google spreadsheets to 'scrape'a few product descriptions from a retail site. It's been working fine for the most part, and I have done it in 2 ways:
1) Specific call to the description part of a post:
=ImportXML(A1,"//div[#class='desc']")
2) Call to the entire 'product Card', which also returns info such as product title, price, time posted, and places these items in adjacent cells in my Google spreadsheet:
=ImportXML(A1,"//div[#class='productCard']")
Both have worked fine, but I've ran into a different problem using each method. If I can resolve even one of these problems, then I'll happily scrap the other method, I just need one of them to work. The problems are:
Method 1) The website prohibits sellers from including contact information in product postings-- when they include an email address anyways, the site automatically blocks it, so that in the posting it simply appears as "...you can reach me at [obscured]" or something like that. The [obscured] appears in a different colour text and is obviously treated differently somehow. When I scrape these descriptions using Method 1, ImportXML appears to get 'bumped' when it hits the word [obscured], and it passed the remaining text from that product description to the next cell over in my spreadsheet. This ruins the entire organization of the sheet, and I'd like to find a way where I can get ImportXML to just ignore the [obscured], and still place the entire text of the product description in one cell.
Method 2) My call for the entire 'product Card' is as follows:
=ImportXML(A1,"//div[#class='productCard']")
As mentioned, this works fine (for most products), and I don't mind the additional info (price, date, etc.) being posted in adjacent cells.
However, the website also allows certain products to be 'featured', where they appear in a different colour box on the site, and are therefore more likely to get a buyer's attention.
Using this method, the 'featured' products are not scraped or imported into my spreadsheet, but are simply passed over.
The source code (on actual site) (via 'inspect element' in Safari) for both the description (Method 1) and product card (Method 2) look as follows (for a normal product (a) and a featured product (b)):
(a)
<div id="productSearchResults">
<div class="productCard tracked">
<div>...</div>
<div class="stats">...</div>
<div class="desc collapsed descFull">...</div>
</div>
(b)
<div id="productSearchResults">
<div class="productCard featured tracked">
<div>...</div>
<div class="stats">...</div>
<div class="desc collapsed descFull">...</div>
</div>
You can see in both (a) an (b) the 'desc' class that I call in Method 1, which seems to work fine.
From my reading on this site, I think I've learned that a given class can't have more than one word, and therefore the use of "desc collapsed descFull" and "productCard tracked" and "productCard featured tracked" don't represent classes with 3, 2 and 3 words in the title, but instead cases where multiple classes have been assigned?
Regardless, the call to 'desc' (Method 1) works fine and seems to get all descriptions.
In method 2 therefore, I would have thought that a call to 'productCard' would get the info for all products, both featured and regular, as 'featured' is an extra class assigned to some 'productCard's. If I call all 'productCard's, shouldn't the normal AND featured ones be returned? This is currently not the case. I've tried calling just 'tracked' and just 'featured' as classes, and neither returns anything, so my logic that they are their own class equivalent to 'productCard' may be flawed.
In summary, the 'desc' call in Method 1 works fine, and even gets descriptions for 'featured' products. However, when contact information is included in the description and is displayed as [obscured] it bumps my data into the next cell in the spreadsheet, immediately following the word. This throws off and ruins all organization.
In Method 2, I am not getting the featured products at all, which greatly weakens what I am trying to do. Can either (or both!) of these problems be fixed??
Thanks so so much for any help you can give me.
***UPDATE: As seen in the comments below, use of the 'contain' as suggested improved Method 2 by retrieving both regular and featured products. However, featured product cards have extra text elements, and since the entire card is being scraped in this method, featured products do not match the cell alignment that regular products do. If there is a way to fix Method 1, this would therefore be much better.
As outlined in the comments below, the [obscured] text appears in a 'span' that follows underneath/indented from the
<div class="desc descFull collapsed"
as
<span class="obscureText">[obscured]</span>
Is there any way that I can import the 'desc's as I have been, but tell the XPath to essentially 'ignore' the [obscured] span, or at least deal with it in a way that doesn't make description text immediately after [obscured] appear one cell over?
Thanks so much everyone!
You can wrap your function with the concatenate()-function to make sure it all shows up in one cell:
=concatenate(ImportXML(A1,"//div[#class='productCard']"))