Related
For the input below:
{
"vals": [
{
"month": "Jan 2022",
"value": 0,
"amount": -200,
"date": "01-02-2022"
},
{
"month": "Feb 2022",
"value": 0,
"amount": -200,
"date": "28-02-2022"
}
],
"items": [
{
"date": "01-02-2022",
"amount": -200
},
{
"date": "04-02-2022",
"amount": 100
},
{
"date": "28-02-2022",
"amount": -200
},
{
"date": "10-03-2022"
"amount": 250
},
{
"date": "12-03-2022"
"amount": 50
}
]
}
I want the below output
{
"vals": [
{
"month": "Jan 2022",
"value": 37
},
{
"month": "Feb 2022",
"value": 12
}
]
}
for month "Jan 2022" of vals, we have debit amount on 01-02-2022. So need go through the items arrays from 01-02-2022 till the total sum of amount matches with vals "Jan 2022" amount value and we need to the no of days between i.e. 01-02-2022 and 10-03-2022
for month "Feb 2022" instead of going through items array again from first we should continue where we left for Jan 2022.
{
"date": "10-03-2022"
"amount": 250
}
of this item 100 is considered for Jan 2022 and 150 is considered for Feb 2022.
so I need to loop items array such that I should continue where I left for an element of vals array.
{
"date": "10-03-2022"
"amount": 250
}
this element of items array should be considered twice once for Jan 2022 and second for Feb 2022
But
{
"date": "04-02-2022"
"amount": 100
}
should considered only once as the 100 will not completely serve Jan 2022 amount i.e. -200
I hope I made it clear.
Unfortunately there are some aspects of the problem which I do not understand, but the following should help as it addresses the key need:
I need to loop items array such that I should continue where I left for an element of vals array.
The key to doing this cleanly is to define a helper function which allows us to keep track of where to resume the search:
# input: [ $index, $array ] where $index is null or >= -1
# output: the first index, $i, in the array for which
# $i > $index and $array[$i].amount == $v , or else null
def value($v):
. as [ $index, $array ]
| if $index == null then null
else first( range($index + 1; $array|length) | select($array[.].amount == $v) ) // null
end ;
For computing the number of days between two dates, another helper function will be useful:
# Date format: dd-mm-year
def days($finish; $start):
[$finish, $start]
| map(strptime("%d-%m-%Y") | mktime) # seconds
| (.[0] - .[1]) / 86400 + 0.5 | trunc ;
Now we have simply to build up the result by visiting the elements of .vals:
.items as $items
| reduce .vals[] as $val ({ix: 0, date: .vals[0].date, array: []};
([.ix, $items] | value($val.amount)) as $ix
| .ix = $ix
| if $ix == null
then .
else .date as $date
| .array += [$val | {month, value: days($items[$ix].date; $date) }]
| .date = $date
end )
As already stated, this is probably not exactly what you want, but should provide a suitable framework for you.
I've the following date: "2022-06-04T00:00:00.000Z" format, We've need of date calculation for highcharts in this numeric type format "1525844100000" so how can I calculate in react-highcharts
xAxis: {
type: 'datetime',
ordinal: false,
startOnTick: false,
endOnTick: false,
minPadding: 0,
maxPadding: 0,
Date: false,
tickInterval: 4 3600 1000,
minRange: 1 24 3600000,
dateTimeLabelFormats: {
day: '%l %P',
hour: '%l %P'
},
offset: 0,
},
series: [
{
"data": [[1.424304e+12, 0.25]],
color: '#FFA749',
},
],
"highcharts": "^6.1.1",
"react-highcharts": "^16.0.2",
I've given above my charts details
In order to convert ISO-8601 to timestamp format, use getTime() JS method.
let timestamp = new Date('2022-06-04T00:00:00.000Z').getTime()
// expected output: 1654300800000
Demo: https://jsfiddle.net/BlackLabel/vnLdum1k/
I need to make Select component with Search input as first option in dropdown list. Something like this:
The main problem is that Search component acts as normal from input. I don't know how to make it focusable. Thank you.
Problem Explanation
This happens because MenuItem is a direct child of the Select component. It acts in the same way as described in Selected menu documentation. You can see that when Menu (or in our case Select) is opened, focus is automatically put onto the selected MenuItem. That's why TextField loses focus in the first place (even if we attach an autoFocus attribute to it).
Ok, so we can obviously simply hack this using the useRef hook on a TextField and then call the focus() method when Select opens. Something like this:
var inputRef = useRef(undefined);
...
<Select onAnimationEnd={() -> inputRef.current.focus()} ... >
...
<TextField ref={inputRef} ... />
...
</Select>
Well not so fast, there's a catch!
Here's where things break: You open your select and focus shifts to the input field as expected. Then you insert search text that would filter out the currently selected value. Now if you remove text with backspace until the currently selected item appears again, you would see that focus would automatically be placed from input field to the currently selected option. It might seem like a viable solution at first but you can see where UX suffers and we don't get expected stable behavior that we want.
Solution
I find your question a bit vague without any code and proper explanation, but I still find it useful since I was searching for the exact same solution as you: Searchable Select MUI Component with good UX. So please note that this is my assumption of what you wanted as a working solution.
Here's a CodeSandbox with my working solution. All the important bits are explained in code comments and here:
The most important change is adding MenuProps={{ autoFocus: false }} attribute to the Select component and autoFocus attribute to the TextField component.
I've put the search TextField into a ListSubheader so that it doesn't act as a selectable item in the menu. i.e. we can click the search input without triggering any selection.
I've added a custom renderValue function. This prevents rendering empty string in Select's value field if search text would exclude the currently selected option.
I've disabled event propagation on TextField with the onKeyDown function. This prevents auto selecting item while typing (which is default Select behavior)
[BONUS] You can easily extend this component with multi selection support, which was what I ended up making for my project, but I'll not include the details here since it's out of the scope of your question.
The MUI Autocomplete component might be just what you need
[https://mui.com/components/autocomplete/](MUI Autocomplete)
Auto Complete is a Component provided by the MUI Library. It has the same functionality like Select option, and in addition provides a search-option, along with other options improving developer experience. Here is a little snippet of the Autocomplete Component:
import * as React from 'react';
import TextField from '#mui/material/TextField';
import Autocomplete from '#mui/material/Autocomplete';
export default function ComboBox() {
return (
<Autocomplete
disablePortal
id="combo-box-demo"
options={top100Films}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Movie" />}
/>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ label: 'The Shawshank Redemption', year: 1994 },
{ label: 'The Godfather', year: 1972 },
{ label: 'The Godfather: Part II', year: 1974 },
{ label: 'The Dark Knight', year: 2008 },
{ label: '12 Angry Men', year: 1957 },
{ label: "Schindler's List", year: 1993 },
{ label: 'Pulp Fiction', year: 1994 },
{
label: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ label: 'The Good, the Bad and the Ugly', year: 1966 },
{ label: 'Fight Club', year: 1999 },
{
label: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
label: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ label: 'Forrest Gump', year: 1994 },
{ label: 'Inception', year: 2010 },
{
label: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ label: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ label: 'Goodfellas', year: 1990 },
{ label: 'The Matrix', year: 1999 },
{ label: 'Seven Samurai', year: 1954 },
{
label: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ label: 'City of God', year: 2002 },
{ label: 'Se7en', year: 1995 },
{ label: 'The Silence of the Lambs', year: 1991 },
{ label: "It's a Wonderful Life", year: 1946 },
{ label: 'Life Is Beautiful', year: 1997 },
{ label: 'The Usual Suspects', year: 1995 },
{ label: 'Léon: The Professional', year: 1994 },
{ label: 'Spirited Away', year: 2001 },
{ label: 'Saving Private Ryan', year: 1998 },
{ label: 'Once Upon a Time in the West', year: 1968 },
{ label: 'American History X', year: 1998 },
{ label: 'Interstellar', year: 2014 },
{ label: 'Casablanca', year: 1942 },
{ label: 'City Lights', year: 1931 },
{ label: 'Psycho', year: 1960 },
{ label: 'The Green Mile', year: 1999 },
{ label: 'The Intouchables', year: 2011 },
{ label: 'Modern Times', year: 1936 },
{ label: 'Raiders of the Lost Ark', year: 1981 },
{ label: 'Rear Window', year: 1954 },
{ label: 'The Pianist', year: 2002 },
{ label: 'The Departed', year: 2006 },
{ label: 'Terminator 2: Judgment Day', year: 1991 },
{ label: 'Back to the Future', year: 1985 },
{ label: 'Whiplash', year: 2014 },
{ label: 'Gladiator', year: 2000 },
{ label: 'Memento', year: 2000 },
{ label: 'The Prestige', year: 2006 },
{ label: 'The Lion King', year: 1994 },
{ label: 'Apocalypse Now', year: 1979 },
{ label: 'Alien', year: 1979 },
{ label: 'Sunset Boulevard', year: 1950 },
{
label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ label: 'The Great Dictator', year: 1940 },
{ label: 'Cinema Paradiso', year: 1988 },
{ label: 'The Lives of Others', year: 2006 },
{ label: 'Grave of the Fireflies', year: 1988 },
{ label: 'Paths of Glory', year: 1957 },
{ label: 'Django Unchained', year: 2012 },
{ label: 'The Shining', year: 1980 },
{ label: 'WALL·E', year: 2008 },
{ label: 'American Beauty', year: 1999 },
{ label: 'The Dark Knight Rises', year: 2012 },
{ label: 'Princess Mononoke', year: 1997 },
{ label: 'Aliens', year: 1986 },
{ label: 'Oldboy', year: 2003 },
{ label: 'Once Upon a Time in America', year: 1984 },
{ label: 'Witness for the Prosecution', year: 1957 },
{ label: 'Das Boot', year: 1981 },
{ label: 'Citizen Kane', year: 1941 },
{ label: 'North by Northwest', year: 1959 },
{ label: 'Vertigo', year: 1958 },
{
label: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ label: 'Reservoir Dogs', year: 1992 },
{ label: 'Braveheart', year: 1995 },
{ label: 'M', year: 1931 },
{ label: 'Requiem for a Dream', year: 2000 },
{ label: 'Amélie', year: 2001 },
{ label: 'A Clockwork Orange', year: 1971 },
{ label: 'Like Stars on Earth', year: 2007 },
{ label: 'Taxi Driver', year: 1976 },
{ label: 'Lawrence of Arabia', year: 1962 },
{ label: 'Double Indemnity', year: 1944 },
{
label: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ label: 'Amadeus', year: 1984 },
{ label: 'To Kill a Mockingbird', year: 1962 },
{ label: 'Toy Story 3', year: 2010 },
{ label: 'Logan', year: 2017 },
{ label: 'Full Metal Jacket', year: 1987 },
{ label: 'Dangal', year: 2016 },
{ label: 'The Sting', year: 1973 },
{ label: '2001: A Space Odyssey', year: 1968 },
{ label: "Singin' in the Rain", year: 1952 },
{ label: 'Toy Story', year: 1995 },
{ label: 'Bicycle Thieves', year: 1948 },
{ label: 'The Kid', year: 1921 },
{ label: 'Inglourious Basterds', year: 2009 },
{ label: 'Snatch', year: 2000 },
{ label: '3 Idiots', year: 2009 },
{ label: 'Monty Python and the Holy Grail', year: 1975 },
];
I need to remove the right icons that are the up and down arrows from a Material UI TextField that I modified from the Material UI documentations (https://material-ui.com/components/autocomplete/#autocomplete) Highlights section.
I tried some solutions from stack overflow like (Remove the arrow and cross that appears for TextField type=“time” material-ui React) and (Remove the arrow and cross that appears for TextField type=“time” material-ui React) but they didn't work and, I ended up with the following code:
App.js:
import React from "react";
import "./styles.css";
import { makeStyles } from "#material-ui/core/styles";
import Autocomplete from "#material-ui/lab/Autocomplete";
import parse from "autosuggest-highlight/parse";
import match from "autosuggest-highlight/match";
import { InputAdornment, TextField } from "#material-ui/core";
import SearchIcon from "#material-ui/icons/Search";
const useStyles = makeStyles(() => ({
noBorder: {
border: "none"
}
}));
export default function Highlights() {
const classes = useStyles();
return (
<Autocomplete
style={{ width: 300 }}
options={top100Films}
getOptionLabel={(option) => option.title}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
margin="normal"
required
fullWidth
autoFocus
classes={{ notchedOutline: classes.input }}
// onChange={handlePhoneNumberChange}
placeholder="Search..."
type="search"
InputProps={{
...params.InputProps,
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
classes: { notchedOutline: classes.noBorder }
}}
/>
)}
renderOption={(option, { inputValue }) => {
const matches = match(option.title, inputValue);
const parts = parse(option.title, matches);
return (
<div>
{parts.map((part, index) => (
<span
key={index}
style={{ fontWeight: part.highlight ? 700 : 400 }}
>
{part.text}
</span>
))}
</div>
);
}}
/>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: "The Shawshank Redemption", year: 1994 },
{ title: "The Godfather", year: 1972 },
{ title: "The Godfather: Part II", year: 1974 },
{ title: "The Dark Knight", year: 2008 },
{ title: "12 Angry Men", year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: "Pulp Fiction", year: 1994 },
{ title: "The Lord of the Rings: The Return of the King", year: 2003 },
{ title: "The Good, the Bad and the Ugly", year: 1966 },
{ title: "Fight Club", year: 1999 },
{ title: "The Lord of the Rings: The Fellowship of the Ring", year: 2001 },
{ title: "Star Wars: Episode V - The Empire Strikes Back", year: 1980 },
{ title: "Forrest Gump", year: 1994 },
{ title: "Inception", year: 2010 },
{ title: "The Lord of the Rings: The Two Towers", year: 2002 },
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: "Goodfellas", year: 1990 },
{ title: "The Matrix", year: 1999 },
{ title: "Seven Samurai", year: 1954 },
{ title: "Star Wars: Episode IV - A New Hope", year: 1977 },
{ title: "City of God", year: 2002 },
{ title: "Se7en", year: 1995 },
{ title: "The Silence of the Lambs", year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: "Life Is Beautiful", year: 1997 },
{ title: "The Usual Suspects", year: 1995 },
{ title: "Léon: The Professional", year: 1994 },
{ title: "Spirited Away", year: 2001 },
{ title: "Saving Private Ryan", year: 1998 },
{ title: "Once Upon a Time in the West", year: 1968 },
{ title: "American History X", year: 1998 },
{ title: "Interstellar", year: 2014 },
{ title: "Casablanca", year: 1942 },
{ title: "City Lights", year: 1931 },
{ title: "Psycho", year: 1960 },
{ title: "The Green Mile", year: 1999 },
{ title: "The Intouchables", year: 2011 },
{ title: "Modern Times", year: 1936 },
{ title: "Raiders of the Lost Ark", year: 1981 },
{ title: "Rear Window", year: 1954 },
{ title: "The Pianist", year: 2002 },
{ title: "The Departed", year: 2006 },
{ title: "Terminator 2: Judgment Day", year: 1991 },
{ title: "Back to the Future", year: 1985 },
{ title: "Whiplash", year: 2014 },
{ title: "Gladiator", year: 2000 },
{ title: "Memento", year: 2000 },
{ title: "The Prestige", year: 2006 },
{ title: "The Lion King", year: 1994 },
{ title: "Apocalypse Now", year: 1979 },
{ title: "Alien", year: 1979 },
{ title: "Sunset Boulevard", year: 1950 },
{
title:
"Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",
year: 1964
},
{ title: "The Great Dictator", year: 1940 },
{ title: "Cinema Paradiso", year: 1988 },
{ title: "The Lives of Others", year: 2006 },
{ title: "Grave of the Fireflies", year: 1988 },
{ title: "Paths of Glory", year: 1957 },
{ title: "Django Unchained", year: 2012 },
{ title: "The Shining", year: 1980 },
{ title: "WALL·E", year: 2008 },
{ title: "American Beauty", year: 1999 },
{ title: "The Dark Knight Rises", year: 2012 },
{ title: "Princess Mononoke", year: 1997 },
{ title: "Aliens", year: 1986 },
{ title: "Oldboy", year: 2003 },
{ title: "Once Upon a Time in America", year: 1984 },
{ title: "Witness for the Prosecution", year: 1957 },
{ title: "Das Boot", year: 1981 },
{ title: "Citizen Kane", year: 1941 },
{ title: "North by Northwest", year: 1959 },
{ title: "Vertigo", year: 1958 },
{ title: "Star Wars: Episode VI - Return of the Jedi", year: 1983 },
{ title: "Reservoir Dogs", year: 1992 },
{ title: "Braveheart", year: 1995 },
{ title: "M", year: 1931 },
{ title: "Requiem for a Dream", year: 2000 },
{ title: "Amélie", year: 2001 },
{ title: "A Clockwork Orange", year: 1971 },
{ title: "Like Stars on Earth", year: 2007 },
{ title: "Taxi Driver", year: 1976 },
{ title: "Lawrence of Arabia", year: 1962 },
{ title: "Double Indemnity", year: 1944 },
{ title: "Eternal Sunshine of the Spotless Mind", year: 2004 },
{ title: "Amadeus", year: 1984 },
{ title: "To Kill a Mockingbird", year: 1962 },
{ title: "Toy Story 3", year: 2010 },
{ title: "Logan", year: 2017 },
{ title: "Full Metal Jacket", year: 1987 },
{ title: "Dangal", year: 2016 },
{ title: "The Sting", year: 1973 },
{ title: "2001: A Space Odyssey", year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: "Toy Story", year: 1995 },
{ title: "Bicycle Thieves", year: 1948 },
{ title: "The Kid", year: 1921 },
{ title: "Inglourious Basterds", year: 2009 },
{ title: "Snatch", year: 2000 },
{ title: "3 Idiots", year: 2009 },
{ title: "Monty Python and the Holy Grail", year: 1975 }
];
styles.css:
.App {
font-family: sans-serif;
text-align: center;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type="search"] {
-moz-appearance: textfield;
}
/* remove outsideof arrows button */
input[type="search"]::-webkit-outside-spin-button {
display: none;
}
According to this document you need to add freesolo
return (
<Autocomplete
style={{ width: 300 }}
options={top100Films}
freeSolo
getOptionLabel={(option) => option.title}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
margin="normal"
required
fullWidth
autoFocus
classes={{ notchedOutline: classes.input }}
// onChange={handlePhoneNumberChange}
placeholder="Search..."
type="search"
InputProps={{
...params.InputProps,
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
classes: { notchedOutline: classes.noBorder }
}}
/>
)}
renderOption={(option, { inputValue }) => {
const matches = match(option.title, inputValue);
const parts = parse(option.title, matches);
return (
<div>
{parts.map((part, index) => (
<span
key={index}
style={{ fontWeight: part.highlight ? 700 : 400 }}
>
{part.text}
</span>
))}
</div>
);
}}
/>
);
Try this css code (for this link https://material-ui.com/components/autocomplete/#autocomplete)
.MuiAutocomplete-popupIndicator {
display: none !important;
}
You dont need freesolo.
<Autocomplete>
...
popupIcon={null}
/>
By this you can remove the ArrowDownIcon but keep in mind what is the idea behind the Autocomplete free solo and combo box:
The widget(Material UI Autocomplete) is useful for setting the value of a single-line textbox in
one of two types of scenarios:
The value for the textbox must be chosen from a predefined set of
allowed values, e.g., a location field must contain a valid location
name: combo box.
The textbox may contain any arbitrary value, but it
is advantageous to suggest possible values to the user, e.g., a search
field may suggest similar or previous searches to save the user time:
free solo.
I want to show my custom (Day-Month-Year Hour:Min:Sec -->ex: 01-05-2019 14:06:47 PM) time format on chartjs chart
How Can i Show On chart xAxis Date Format Like This >>
Day-Month-Year Hour:Min:Sec -->ex: 01-05-2019 14:06:47 PM
time format is timeFormat = 'DD/MM/YYYY h:mm:ss a' but on chart only shows Month,Day,Year
This is my code below and:
Online Code On >>> https://codepen.io/sibche2013/pen/XQWWbb
var timeFormat = 'DD/MM/YYYY h:mm:ss a';
var config = {
type: 'line',
data: {
datasets: [
{
label: "UK Dates",
data: [{
x: "01-04-2014 02:15:50", y: 175
}, {
x: "12-04-2014 12:19:27", y: 177
}, {
x: "23-04-2014 22:25:47", y: 178
}, {
x: "28-04-2014 14:46:40", y: 182
}],
fill: false,
borderColor: 'blue'
}
]
},
options: {
responsive: true,
title: {
display: true,
text: "Chart.js Time Scale"
},
scales: {
xAxes: [{
type: "time",
time: {
format: timeFormat,
tooltipFormat: 'll'
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
}
}]
}
}
};
window.onload = function () {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};